React Native嵌套栈中如何获取路由名称以隐藏底部标签栏

你的问题核心在于：BottomTab的导航状态里，Account是嵌套栈的容器路由，它内部包含了AccountStack的子导航状态，直接取当前路由只能拿到容器名称Account，无法获取子栈内实际页面的路由名。

可以通过递归遍历嵌套导航状态，拿到最内层的当前路由名，再判断是否隐藏标签栏：

1. 编写递归获取当前路由名的辅助函数 #

const getCurrentRouteName = (navigationState) => {
  const currentRoute = navigationState.routes[navigationState.index];
  // 如果当前路由存在嵌套的导航状态，递归深入获取子路由名称
  if (currentRoute.state) {
    return getCurrentRouteName(currentRoute.state);
  }
  return currentRoute.name;
};

2. 在BottomTab组件中使用该函数获取实际路由名 #

const navigationState = useNavigationState(state => state);
const currentRouteName = getCurrentRouteName(navigationState);

3. 根据路由名控制标签栏显示 #

你可以选择精准匹配需要隐藏的页面，或者通过路由名前缀批量判断：

// 方式1：精准匹配AccountStack下的目标页面
const shouldHideTabBar = ['AccountProfile', 'AccountSettings', 'AccountEdit'].includes(currentRouteName);

// 方式2：匹配AccountStack下所有页面（假设子页面路由名都以Account开头）
// const shouldHideTabBar = currentRouteName.startsWith('Account');

4. 配置BottomTab的显示规则 #

在Tab.Navigator的screenOptions中设置tabBarVisible：

<Tab.Navigator
  screenOptions={{
    tabBarVisible: !shouldHideTabBar,
    // 你的其他标签栏配置
  }}
>
  {/* 各个标签页配置，比如Account栈的入口 */}
  <Tab.Screen name="Account" component={AccountStack} />
  {/* 其他标签页... */}
</Tab.Navigator>

这样就能在进入AccountStack下的任意子页面时，自动隐藏底部标签栏了。

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