Question

使用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：

<a target="_blank"><img src="https://d1sz9tkli0lfjq.cloudfront.net/items/2I3F2c1O3u2V2F2B3J1Y/Screen%20Recording%202019-06-12%20at%2010.13%20AM.gif" style="display: block;height: auto;width: 100%;"/></a>

任何提示/解决方案将不胜感激。 TIA

动态隐藏TabBar会稍有延迟

0 个答案: