React Navigation中useRoute()在Tab导航下始终获取Stack路由问题

问题原因 #

你在TabNav组件里调用useRoute()时，因为TabNav本身是外层Stack.Navigator的一个Screen（名称为Main），所以useRoute()会获取到Stack导航器的路由信息，而非内部Tab导航器的路由。

不同场景的解决办法 #

场景1：在Tab子页面（如Home、Apousies）中获取Tab路由 #

直接在Tab对应的子组件（比如Home组件）里调用useRoute()，此时上下文属于Tab导航器，会返回当前Tab的路由信息：

// Home.js
import { useRoute } from '@react-navigation/native';

const Home = () => {
  const tabRoute = useRoute();
  console.log(tabRoute); // 输出类似：{"key": "...", "name": "Home", "params": undefined}
  // ...其他业务代码
}

场景2：在TabNav组件内部获取当前选中的Tab路由 #

如果需要在TabNav组件里拿到当前活跃的Tab路由，得通过导航器状态来获取：

方法1：用useNavigationState

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

const TabNav = () => {
  const [role, setRole] = useState("student");
  // 获取Tab导航器的状态
  const tabNavigationState = useNavigationState(state => state);
  // 当前选中的Tab路由
  const currentTabRoute = tabNavigationState.routes[tabNavigationState.index];

  useEffect(() => {
    (async() => {
      setRole(await AsyncStorage.getItem("role"));
    })();
    console.log(currentTabRoute); // 输出当前选中的Tab路由，比如Home/Apousies等
  }, [currentTabRoute]);

  // ...后续Tab.Navigator的渲染代码
}

方法2：用useNavigation的getState方法

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

const TabNav = () => {
  const [role, setRole] = useState("student");
  const navigation = useNavigation();

  useEffect(() => {
    (async() => {
      setRole(await AsyncStorage.getItem("role"));
    })();
    // 获取Tab导航器的状态
    const tabState = navigation.getState();
    const currentTabRoute = tabState.routes[tabState.index];
    console.log(currentTabRoute);
  }, [navigation]);

  // ...后续Tab.Navigator的渲染代码
}

额外提示：自定义TabBar中获取当前Tab #

如果是在自定义的CustomTabBar里需要当前选中的Tab信息，tabBar属性会直接传入state参数，直接用就行：

const CustomTabBar = (props) => {
  const currentTabRoute = props.state.routes[props.state.index];
  console.log(currentTabRoute);
  // ...自定义TabBar的渲染逻辑
}

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