如何获取当前活跃Tab.navigator的相关信息？

以下是几种可行的实现方式，你之前用route.name无效，大概率是嵌套导航结构导致拿到的不是Tab层级的路由信息：

方法1：使用useNavigationState钩子直接获取 #

在需要获取活跃Tab的组件中，通过useNavigationState遍历导航状态，定位到Tab Navigator的活跃路由：

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

// 在组件内部调用
const activeTabName = useNavigationState(state => {
  // 从根状态找到Tab类型的导航器（如果是嵌套结构，需根据实际路由层级调整）
  const tabRoute = state.routes.find(route => route.state?.type === 'tab');
  if (tabRoute?.state) {
    return tabRoute.state.routes[tabRoute.state.index].name;
  }
  // 如果Tab是根导航器，直接取当前根路由
  return state.routes[state.index].name;
});

方法2：通过Tab Navigator的onStateChange监听状态 #

在定义Tab Navigator时，利用onStateChange回调实时更新活跃Tab的信息，可将其存入组件状态供全局使用：

import { useState } from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {
  const [activeTab, setActiveTab] = useState('默认Tab名称');

  return (
    <Tab.Navigator
      onStateChange={(newState) => {
        const currentRoute = newState.routes[newState.index];
        setActiveTab(currentRoute.name);
      }}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
      {/* 其他Tab屏幕 */}
    </Tab.Navigator>
  );
}

方法3：在Tab子屏幕中获取父级Tab状态 #

如果是在Tab的直接子屏幕中，可通过useRoute结合导航状态获取：

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

function HomeScreen() {
  const route = useRoute();
  const navigationState = useNavigationState(state => state);
  
  // 找到当前屏幕所属的Tab导航器状态
  const tabState = navigationState.routes.find(r => r.key === route.parent).state;
  const activeTab = tabState.routes[tabState.index].name;
  
  console.log('当前活跃Tab：', activeTab);
  return <>{/* 屏幕内容 */}</>;
}

如果以上方法仍有问题，可以提供你的导航结构代码，方便进一步排查。

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