反应本机反应导航选项卡CreateBoottomTabNavigator tabBarVisible false不工作

提问者：小点点

反应本机反应导航选项卡CreateBoottomTabNavigator tabBarVisible false不工作

天然反应；CreateBoottomTabNavigator的react导航选项卡wuth tabBarVisible=false不工作。我试图隐藏AddSetting的底部选项卡

从“React”导入React从“React Navigator”导入{createSwitchNavigator，createAppContainer}从“React navigation”导入{样式表、文本、文本输入、视图、图标、图像、按钮、滚动视图}从“React native”导入；从“反应导航选项卡”导入{CreateBoottomTabNavigator}；从“反应本机向量图标/Ionicons”导入Ionicons；从“”导入登录名/屏幕/登录“从导入注册”/屏幕/注册“从导入MyList”/MyList“从导入我的表单”/我的形式'；从“”导入管理器/经理'；从“”导入管理器屏幕/管理屏幕'；从“…”导入设置/设置'；从“”导入设置屏幕/设置屏幕'；从“”导入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',
  }
})

请指教。

问候你迈克尔

共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 }
})