React Native中如何获取双层嵌套屏幕的路由名称？

• 在StackScreenΑ中，可根据所在页面获取StackScreenΒ1或StackScreenΒ2的路由名称。
• 同理，在StackScreenB1中，可根据所在页面获取ScreenC1、ScreenC2或ScreenC3的路由名称。

请问当处于StackScreenΑ页面时，能否获取StackScreenB1的嵌套屏幕（C层级页面）的路由名称？

具体说明：处于A层级页面，想要获取C层级页面的路由名称，而非B层级的。

*当前在A页面获取B层级路由名称的方式为：alert(route.name)

可以获取，通过React Navigation的导航容器实例就能访问嵌套导航的状态，具体操作如下：

1. 获取导航容器引用
   用useNavigationContainerRef钩子拿到导航容器的引用，再绑定到NavigationContainer上：

   import { useNavigationContainerRef } from '@react-navigation/native';
   
   const navigationRef = useNavigationContainerRef();
   
   // 在导航容器中传入引用
   <NavigationContainer ref={navigationRef}>
     {/* 你的导航结构 */}
   </NavigationContainer>
   

2. 获取C层级路由名称
   在StackScreenΑ页面中，通过导航容器引用获取全局导航状态，逐层找到嵌套的StackScreenB1的状态，进而提取当前活跃的C层级路由名称：

   const getCRouteName = () => {
     const rootState = navigationRef.getRootState();
     // 定位到StackScreenΑ的路由栈
     const aStack = rootState.routes.find(item => item.name === 'StackScreenΑ');
     if (aStack?.state) {
       // 定位到StackScreenB1的路由栈
       const b1Stack = aStack.state.routes.find(item => item.name === 'StackScreenB1');
       if (b1Stack?.state) {
         // 获取当前活跃的C层级路由名称
         const currentCRoute = b1Stack.state.routes[b1Stack.state.index].name;
         alert(currentCRoute);
       }
     }
   };
   

3. 实时监听路由变化（可选）
   如果需要实时同步C层级的路由变化，可通过useNavigationState监听StackScreenΑ的状态变化：

   import { useNavigationState, useEffect } from '@react-navigation/native';
   
   // 在StackScreenΑ页面内
   const aStackState = useNavigationState(state => state);
   useEffect(() => {
     const activeBRoute = aStackState.routes[aStackState.index];
     if (activeBRoute.name === 'StackScreenB1' && activeBRoute.state) {
       const currentCRoute = activeBRoute.state.routes[activeBRoute.state.index].name;
       console.log('当前C层级路由：', currentCRoute);
     }
   }, [aStackState]);
   

注意：操作前要确保路由名称和实际定义的导航结构完全匹配。

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