REACT-Native react-navigation-tabs createBottomTabNavigator tabBarVisible false 不起作用答案

【问题标题】：REACT-Native react-navigation-tabs createBottomTabNavigator tabBarVisible false not workingREACT-Native react-navigation-tabs createBottomTabNavigator tabBarVisible false 不起作用
【发布时间】：2020-08-26 17:01:15
【问题描述】：

REACT-native; createBottomTabNavigator wuth tabBarVisible=false 的 react-navigation-tabs 不起作用。我试图隐藏 AddSetting & Manager 的底部选项卡，但没有成功。我的代码如下：

从 'react' 导入 React 导入 { createSwitchNavigator, createAppContainer } from 'react-navigation' import { StyleSheet, Text, TextInput, View, Icon, Image, Button, ScrollView } 来自 '反应原生'; 导入 { createBottomTabNavigator} 从 “反应导航选项卡”；从导入离子 “反应原生矢量图标/离子”；导入登录自 '../screens/Login' 从 '../screens/Signup' 导入注册进口 MyList from '../MyList' import MyForm from '../MyForm'; 进口经理来自“../经理”；从'../ManagerScreen'导入ManagerScreen；从'../Setting'导入设置；从导入设置屏幕 '../设置屏幕'; 从'../AddSetting'导入AddSetting

const Tabs = createBottomTabNavigator({
Request: {
  screen: MyForm,
   navigationOptions: ({navigation}) => ({
     title: 'Request',
     tabBarVisible: true,
     tabBarIcon: ({tintColor}) => (
       <View style={styles.bottomButtons}>
          <Ionicons
                 name="ios-paper"
                 size={25}
                 color={tintColor}
               />
       </View>
     )
   })
},
Status: {
    screen: MyList,
    navigationOptions: ({navigation}) => ({
      title: 'Status',
     tabBarVisible: true,
      tabBarIcon: ({tintColor}) => (
        <View style={styles.bottomButtons}>
           <Ionicons
                  name="ios-alarm"
                  size={25}
                  color={tintColor}
                />
        </View>
      )
    })
},
Setting: {
    screen: Setting,
    navigationOptions: ({navigation}) => ({
      title: 'Setting',
     tabBarVisible: true,
      tabBarIcon: ({tintColor}) => (
        <View style={styles.bottomButtons}>
           <Ionicons
                  name="ios-settings"
                  size={25}
                  color={tintColor}
                />
        </View>
      )
    })
},
AddSetting: {
   screen: AddSetting,
   navigationOptions: ({navigation}) => ({
     title: 'AddSetting',
     tabBarVisible: false,
     tabBarIcon: ({tintColor}) => (
       <View style={styles.bottomButtons}>
          <Ionicons
                 name="ios-settings"
                 size={25}
                 color={tintColor}
               />
       </View>
     )
   })
},
Manager: {
   screen: Manager,
   navigationOptions: ({navigation}) => ({
    title: 'Manager',
    tabBarVisible: false,
    tabBarIcon: ({tintColor}) => (
      <View style={styles.bottomButtons}>
         <Ionicons
                name="ios-person"
                size={25}
                color={tintColor}
              />
      </View>
    )
   })
}
});


const SwitchNavigator = createSwitchNavigator({
        Login: {
            screen: Login
        },
        Signup: {
            screen: Signup
        },
        Home: {
            screen: Tabs
        }
    },
    {
        initialRouteName: 'Login'
    }
)


export default createAppContainer(SwitchNavigator)

const styles = StyleSheet.create({
buttonBottom: {
    width: 200
  },
  textFont:{
    fontFamily:'arial',
    size:20,
    alignItems: 'center',
  }
})

请指教。

问候，米歇尔

【问题讨论】：

你使用哪个版本的 react 导航？

标签： react-native

【解决方案1】：

对于那些希望标签栏不可见的用户，您必须使用 StackNavigator

const SettingsStack = createStackNavigator({
 Setting: {screen: Setting}
})

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

  return {
    tabBarVisible,
  }
}


const Tabs = createBottomTabNavigator({
 SettingsStack :{ screen :SettingsStack }
})

【讨论】：