如何隐藏标签栏导航?

时间:2019-03-04 00:15:40

标签: react-native react-navigation

如何隐藏标签栏导航?导航后,我可以看到选项卡,但不起作用,但是正在起作用。 navigationOptions:{tabBarVisible:false}在第5行上不起作用,但在第22行上,主选项卡运行正常。

const MenStack = createStackNavigator({
menStackNav: { screen: MenTabScreen},
Products: {
  screen: ProductsShow,
  navigationOptions:{tabBarVisible: false},
},
},{
  initialRouteName: 'menStackNav',
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
});
const HomeScreenTabs = createMaterialTopTabNavigator({
 home:{
   screen:HomeTabScreen,
 },
 women: WomenTabScreen,
 men: {
   screen:MenStack,
   navigationOptions:{tabBarVisible: false},
 },
 },{
tabBarOptions: {
activeTintColor: '#fff',
inactiveTintColor: '#eee',
tabStyle:{backgroundColor:'#0077FF',height:40},
labelStyle: {
    fontSize: 14,
    fontFamily:'iransans_medium',
  },
},
  initialRouteName: 'men',
  mode: 'modal',
  headerMode: 'none',
});

我有3个标签和一个堆栈导航,可导航到另一个屏幕以显示产品。产品可见时,我需要隐藏标签栏。

1 个答案:

答案 0 :(得分:1)

您需要使用tabBarVisible将tabBar隐藏在stackPage中

const MenStack = createStackNavigator({
       Home:{screen: MenTabScreen,},
       Products:{screen: ProductsShow,}
    }, {initialRouteName: 'Home', headerMode: 'none')}

    MenStack.navigationOptions = ({navigation}) => {
      let tabBarVisible = true;
      if(navigation.state.index > 0){
        tabBarVisible = false;
      }

      return {
        tabBarVisible,
      }
    }

  const HomeScreenTabs = createBottomTabNavigator({
       Home:{screen: HomeTabScreen,},
       Women :{screen: WomenTabScreen,},
       Men : {screen : MenStack,}
    })

    export default HomeScreenTabs;
相关问题