Question

如何根据某些条件隐藏反应导航底部导航栏中的一项

例如：this.state.show == true

到目前为止，我已经尝试过以下方法

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

Answer 1

嘿，您需要在渲染视图的条件。

您需要先生成两个主视图，然后首先声明所有选项卡，其次丢弃不希望渲染的选项卡。

e.d

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


const HalfManu = createBottomTabNavigator(
{
  Home: {screen: HomeStack},
  Attendance: {screen: AttendanceStack},
  Profile: {screen: ProfileStack},
},

现在，在您的主文件上同时导入这两个文件并有条件地渲染为：

render() {
     return(
         <View>
            {this.state.show ? <FullManu> : <HalfMenu>}
         </View>
     )
}

Answer 2

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

const AppNavigator = ()=> {

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

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


}

反应导航-底部导航栏中的条件隐藏项

2 个答案: