React Navigation - 底部导航栏中的条件隐藏项目 [英] React Navigation - conditional hide item in bottom navigation bar

问题描述

如何根据某些条件隐藏 react-navigation 底部导航栏中的一项

How to hide one of the item in the react-navigation bottom navigation bar based on some condition

例如:this.state.show == true

For Example : this.state.show == true

到目前为止我尝试过如下

So far i had tried as below

const Main = createBottomTabNavigator(
{
  Home: {screen: HomeStack},
  CheckInOut:  this.state.show ? {screen: CheckStack} : null ,
  Attendance: {screen: AttendanceStack},
  Profile: {screen: ProfileStack},
},

推荐答案

您可以有条件地呈现选项卡以隐藏任何项目.
这与上面的解决方案基本相同，但编写方式不同.

You can conditionally render tabs to hide any item.
This is basically the same solution as above but in different way of writing.

const AppNavigator = ()=> {

  let tabs
  if(show){
    tabs = (
      <>
        <AScreen />
        <BScreen />
        <CScreen />
      </>
    )
  }else{
    tabs = (
      <>
        <AScreen />
        <CScreen />
      </>
    )
  }

  return (
    <Tab.Navigator>
     {tabs}
    </Tab.Navigator>
  )


}

这篇关于React Navigation - 底部导航栏中的条件隐藏项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！