Question

如何隐藏标签栏导航？导航后，我可以看到选项卡，但不起作用，但是正在起作用。 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个标签和一个堆栈导航，可导航到另一个屏幕以显示产品。产品可见时，我需要隐藏标签栏。

Answer 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;

如何隐藏标签栏导航？

1 个答案: