React Navigation 6多嵌套栈导航器指定页面隐藏底部Tab栏

核心思路 #

之前单栈场景的方案之所以在多嵌套栈结构下失效，是因为没有给所有Tab绑定统一的嵌套路由状态监听，只要在Tab导航层通过官方提供的getFocusedRouteNameFromRoute方法获取每个嵌套栈当前聚焦的顶层路由，动态控制Tab栏的显示状态即可，无需修改各栈内部代码。

具体实现步骤 #

1. 首先在AppNavigator.js中导入官方提供的路由状态获取方法：

import { getFocusedRouteNameFromRoute } from '@react-navigation/native';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
// 导入现有三个栈组件
import { SearchStack } from './SearchStack';
import { HostNavigator as HostStack } from './HostStack';
import { MoreStack } from './MoreStack';

2. 定义需要隐藏Tab栏的路由名单，以及通用的Tab显示状态判断方法：

const Tab = createMaterialBottomTabNavigator();
// 所有需要隐藏底部Tab栏的页面路由名统一维护在此
const ROUTES_WITH_HIDDEN_TAB = ['Second', 'Fourth'];

const getTabBarDisplay = (route) => {
  // 获取当前Tab下嵌套栈的顶层聚焦路由名，初始加载时默认返回空字符串
  const currentRouteName = getFocusedRouteNameFromRoute(route) ?? '';
  // 匹配到需要隐藏的路由就返回none隐藏Tab，否则正常显示
  return ROUTES_WITH_HIDDEN_TAB.includes(currentRouteName) ? 'none' : 'flex';
};

3. 给每个Tab页配置动态options，绑定Tab显示状态判断逻辑：

export const AppNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Search"
        component={SearchStack}
        options={({ route }) => ({
          tabBarStyle: { display: getTabBarDisplay(route) }
        })}
      />
      <Tab.Screen
        name="Host"
        component={HostStack}
        options={({ route }) => ({
          tabBarStyle: { display: getTabBarDisplay(route) }
        })}
      />
      <Tab.Screen
        name="More"
        component={MoreStack}
        options={({ route }) => ({
          tabBarStyle: { display: getTabBarDisplay(route) }
        })}
      />
    </Tab.Navigator>
  );
};

方案说明 #

• 该方案完全兼容React Navigation 6版本，对createMaterialBottomTabNavigator和createBottomTabNavigator都生效
• 不需要修改HostStack.js、MoreStack.js以及各页面组件的内部代码，所有控制逻辑统一收敛在Tab导航层维护
• 后续新增需要隐藏Tab的页面时，只需要把对应路由名添加到ROUTES_WITH_HIDDEN_TAB数组中即可
• 页面跳转、返回时Tab栏的显示/隐藏会自动跟随路由状态切换，不需要额外写事件监听

效果验证 #

• 进入FirstScreen、ThirdScreen等栈初始页时，路由名不在隐藏列表，底部Tab栏正常显示
• 跳转到SecondScreen、FourthScreen时，路由名匹配隐藏规则，底部Tab栏自动隐藏
• 从二级页面返回栈初始页时，Tab栏会自动恢复显示
• 切换不同Tab时，判断逻辑会自动生效，不会出现跨Tab状态错乱的问题

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