У меня возникли проблемы с динамическим сокрытием TabBar с использованием React Navigation. У меня все работает (имеется в виду, что я могу динамически скрывать TabBar на каком-то конкретном экране), но у него есть небольшая задержка, и он совсем не выглядит хорошо.
Ниже приведена конфигурация моего маршрута (и я пойду снизу вверх, чтобы мне было легче донести свою точку зрения):
1. Мой mainTabNavigator:
const mainTabNavigator = createBottomTabNavigator({
MoviesStackWithModal: {
screen: moviesWithModalStack,
navigationOptions: {
tabBarIcon: ({ tintColor }: any) => <Icon name="movie-roll" type={ 'material-community' } color={ tintColor }/>
}
},
...some other Stack...
});
Далее мой moviesWithModalStack:
const moviesWithModalStack = createStackNavigator({
MoviesStack: moviesStack,
MovieDetails: MovieDetailModalScreen
}, {
initialRouteName: 'MoviesStack',
mode: 'modal',
headerMode: 'none',
cardStyle: {
backgroundColor: colors.default
},
navigationOptions: ({ navigation }) => {
const routeName = navigation.state.routes[navigation.state.index].routeName;
return {
tabBarVisible: routeName !== 'MovieDetails'
};
}
});
3.Наконец, мой moviesStack:
const moviesStack = createStackNavigator({
Movies: MoviesScreen,
SearchMovies: SearchMoviesScreen
})
В конечном счете, я хочу достичь, когда я на Movies и SearchMovies экранах, должен быть виден TabBar, а когда я на MoviesDetail экране, TabBar должен быть скрытый. Поскольку я делаю MoviesDetail модальным, поэтому скрывать TabBar на этом модальном экране имеет смысл для меня.
В moviesWithModalStack я беру routeName из navigation.state, чтобы сообщить router, когда скрывать TabBar со свойством tabBarVisible. Однако есть небольшая задержка, когда TabBar переходит от visible -> hidden и наоборот.
Вот GIF, чтобы показать проблему:
Любые советы / решения будут с благодарностью. ТИА