如何在React Navigation的不同嵌套栈间实现页面导航

嘿，这个问题我前段时间刚踩过坑！你遇到的报错是因为当前页面的navigation对象属于嵌套导航器2，它只能识别自己栈里的ScreenC、ScreenD，根本不知道嵌套导航器1和ScreenA的存在。要跨导航器跳转，得明确告诉React Navigation要走哪一层导航器的路由。

先理清楚你的导航器结构（示例） #

假设你的导航器注册是这样的（先确认你的命名和这个对应上）：

// 嵌套导航器1：包含ScreenA、ScreenB
const StackNavigator1 = createStackNavigator({
  ScreenA: { screen: ScreenA },
  ScreenB: { screen: ScreenB }
});

// 嵌套导航器2：包含ScreenC、ScreenD
const StackNavigator2 = createStackNavigator({
  ScreenC: { screen: ScreenC },
  ScreenD: { screen: ScreenD }
});

// 父导航器（比如底部Tab导航器，把两个嵌套导航器作为子路由）
const RootNavigator = createBottomTabNavigator({
  Nav1: { screen: StackNavigator1 }, // 这里的`name: 'Nav1'`是父导航器中导航器1的路由名
  Nav2: { screen: StackNavigator2 }  // 同理，`name: 'Nav2'`是导航器2的路由名
});

正确的跳转写法（从ScreenD到ScreenA） #

在ScreenD的组件里，用嵌套路由的写法调用navigate：

// 直接在ScreenD的 onPress 或者 useEffect 里写
navigation.navigate('Nav1', {
  screen: 'ScreenA',
  params: { 
    // 这里可以传ScreenA需要的参数，比如 userId: 123
  }
});

原理解释 #

• 第一个参数'Nav1'是父导航器中嵌套导航器1对应的路由名称（就是RootNavigator里注册的那个name），告诉React Navigation先切换到这个子导航器的上下文。
• 然后通过params.screen指定要在这个子导航器里跳转到哪个屏幕（'ScreenA'）。
• 如果需要给ScreenA传参数，直接在params.params里添加，ScreenA可以通过route.params拿到这些值。

进阶：重置目标导航器的栈（可选） #

如果你不想保留ScreenA之前的栈状态，而是想直接新建一个干净的ScreenA实例，可以用reset方法：

navigation.reset({
  index: 0,
  routes: [
    {
      name: 'Nav1',
      state: {
        routes: [
          { name: 'ScreenA', params: { /* 参数 */ } }
        ]
      }
    }
  ]
});

最容易踩的坑 #

一定要检查所有的路由名称拼写！比如父导航器里注册的是'Nav1'，你就不能写成'StackNavigator1'，拼写错了肯定会报错找不到路由。

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