时间戳

首页 > 解决方案 > 如何隐藏标签栏导航？

react-native - 如何隐藏标签栏导航？

问题描述

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

标签： react-nativereact-navigation

解决方案

您需要使用 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;

推荐阅读