React Native中如何获取当前底部Tab导航的屏幕名称？

不管是栈导航（Stack）、Tab导航还是抽屉导航（Drawer），React Navigation 维护的导航状态结构完全一致：每个导航层级都包含index（当前活跃子路由的索引）和routes（当前层级下所有子路由的数组）两个核心字段。你写的递归遍历逻辑核心思路是对的，无法获取Tab下屏幕名通常是两个原因：

• 函数绑定了this，递归调用时如果上下文变化会导致执行异常
• 传入函数的初始路由状态不是根导航的完整状态，只覆盖到栈导航层级，没有包含Tab导航的子路由数据

下面的纯函数实现兼容所有导航类型、任意层级嵌套的场景，可以直接拿到最顶层的活跃屏幕信息：

const getActiveRoute = (navState) => {
  // 无有效子路由时终止递归，返回当前路由
  if (
    !navState?.routes ||
    !Array.isArray(navState.routes) ||
    navState.routes.length === 0 ||
    typeof navState.index !== 'number' ||
    navState.index >= navState.routes.length
  ) {
    return navState;
  }

  const activeChild = navState.routes[navState.index];
  // 子路由存在嵌套导航状态则继续递归，否则返回子路由
  return activeChild.state ? getActiveRoute(activeChild.state) : activeChild;
};

• 全局监听路由变化时，从NavigationContainer的onStateChange回调拿到完整根导航状态，传入函数即可获取当前屏幕名，不受Tab/Stack嵌套层级影响：

import { NavigationContainer } from '@react-navigation/native';

export default function RootApp() {
  return (
    <NavigationContainer
      onStateChange={(rootState) => {
        const currentRoute = getActiveRoute(rootState);
        // currentRoute.name 就是当前活跃的屏幕名称
        console.log('当前屏幕：', currentRoute.name);
      }}
    >
      {/* 你的导航结构 */}
    </NavigationContainer>
  );
}

• 组件内获取当前路由名时，配合useNavigationState钩子使用即可，不需要手动传递导航状态：

import { useNavigationState } from '@react-navigation/native';

// 封装为通用自定义hook
function useCurrentRouteName() {
  return useNavigationState(state => getActiveRoute(state)?.name);
}

// 业务组件中调用
function BusinessComponent() {
  const currentScreenName = useCurrentRouteName();
  return <Text>当前所在屏幕：{currentScreenName}</Text>;
}

注意：不要直接从单个屏幕的navigation prop上取局部state传入函数，局部state只包含当前导航层级的路由信息，会导致递归提前终止，无法拿到深层Tab下的屏幕信息。

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