新版React Navigation无tabBarVisible选项时如何隐藏Stack内指定页面的Tab栏

解决方案 #

React Navigation v6及后续版本已移除tabBarVisible配置项，可通过动态控制tabBarStyle的display属性实现Tab栏显隐控制，你无需修改现有Stack Navigator代码，仅调整Tab Navigator的配置即可适配所有3个嵌套Stack的需求：

调整后的Tab Navigator代码 #

<Tab.Navigator
  initialRouteName='Passports'
  screenOptions={({ route }) => ({
    tabBarLabelStyle: {
      fontSize: 12
    },
    tabBarStyle: {
      backgroundColor: "white",
      // 动态判断Tab栏显隐
      display: (() => {
        const stackState = route.state;
        // Stack未初始化/处于Stack首页时显示Tab栏
        if (!stackState || stackState.index === 0) return "flex";
        // 其余子页面隐藏Tab栏
        return "none";
      })(),
    },
  })}
>
  <Tab.Screen
    name='EquipmentStack'
    component={EquipmentStack}
    options={{
      tabBarLabel:'Equipment'
    }}
  />
  <Tab.Screen
    name='ObjectsStack'
    component={ObjectsStack}
    options={{ tabBarLabel:'Objects'}}
  />
  <Tab.Screen
    name='DocumentationStack'
    component={DocumentationStack}
    options={{ tabBarLabel:'Documentation'}}
  />
</Tab.Navigator>

实现逻辑 #

• 每个Tab对应的嵌套Stack Navigator都自带独立的路由状态，route.state.index表示当前Stack内活跃页面的下标
• 你的3个Stack的首个页面（下标为0）均为需要显示Tab栏的页面，其余下标大于0的为需要隐藏Tab栏的子页面，该判断逻辑可直接通用适配所有Stack
• 新增!stackState判断是为了避免页面首次加载时路由状态未初始化导致的Tab栏闪动问题

如果后续需要给特定子页面开放Tab栏显示，仅需在上述判断逻辑中添加对应路由名称的校验即可，示例：

if (!stackState || stackState.index === 0 || stackState.routes[stackState.index].name === '指定页面名称') {
  return 'flex'
}

内容的提问来源于stack exchange，提问作者abldabl