React Native 6中createBottomTabNavigator隐藏Tab及路由配置问题

1. React Navigation 6 隐藏C页面对应的底部标签 #

React Navigation 6 已经完全废弃了v5版本的tabBarOptions配置，所有Tab相关的属性都迁移到了screenOptions或者单个Tab.Screen的options属性中，你之前的配置自然失效。

如果只想隐藏C页面的标签栏按钮，不需要修改其他配置，直接给C对应的Tab.Screen添加如下配置即可：

const Tab = createBottomTabNavigator();
const Main: () => React$Node = props => {
  return (
    <Tab.Navigator>
      <Tab.Screen name={Routes.A} component={A} />
      <Tab.Screen name={Routes.B} component={B} />
      {/* 新增options配置隐藏C的tab按钮 */}
      <Tab.Screen 
        name={Routes.C} 
        component={C}
        options={{
          // 直接不渲染C对应的标签按钮
          tabBarButton: () => null,
          // 进入C页面后隐藏整个底部标签栏可额外加这个配置
          // tabBarStyle: { display: 'none' }
        }}
      />
    </Tab.Navigator>
  );
};

2. 不将C注册为Tab.Screen的实现方案 #

首先明确导航规则：不管是createBottomTabNavigator还是createStackNavigator，所有需要跳转的路由必须提前注册在当前导航树的任意一个导航器中，你直接绑定组件不注册路由，必然会提示「没有对应路由」，二者的逻辑是完全一致的。

更合理的实现方式是用嵌套导航，把Tab导航作为Stack导航的子页面，C页面注册在Stack层级，不需要放到Tab里，结构如下：

步骤1：调整导航结构，外层加Stack导航 #

import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

// 根导航器
const RootNavigator = () => {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      {/* 原有的底部Tab导航作为根页面 */}
      <Stack.Screen name="MainTab" component={Main} />
      {/* C页面注册在Stack层级，不属于Tab导航 */}
      <Stack.Screen name={Routes.C} component={C} />
    </Stack.Navigator>
  )
}

// 原有Tab导航只保留需要显示在底部栏的A、B页面
const Main: () => React$Node = props => {
  return (
    <Tab.Navigator>
      <Tab.Screen name={Routes.A} component={A} />
      <Tab.Screen name={Routes.B} component={B} />
    </Tab.Navigator>
  );
};

步骤2：直接跳转即可 #

你现有的Menu组件代码不需要做任何修改，直接调用navigation.navigate(Routes.C)就能正常跳转，根Stack导航会识别这个路由。 #

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