React Navigation：如何跳过嵌套导航器的初始路由？

这个问题我之前也碰到过，嵌套导航器的路由栈管理确实容易踩这类坑。你现在的问题核心是：直接调用navigate('DesiredRoute')时，Onboard这个StackNavigator已经默认加载了它的初始路由，你的操作相当于在这个已存在的栈里新增了目标路由，最终栈就变成了[InitialRoute, DesiredRoute]。要实现只保留DesiredRoute的效果，你可以用下面两种方法：

方法一：使用reset重置整个导航状态 #

通过navigation.reset方法，直接构建你想要的导航栈结构，完全替换掉当前的路由状态。这样可以确保SwitchNavigator只加载Onboard，而Onboard内部的栈只有你指定的DesiredRoute：

if (onboardingCheckpointCleared) {
  navigation.reset({
    index: 0,
    routes: [
      {
        name: 'Onboard',
        state: {
          routes: [{ name: 'DesiredRoute' }]
        }
      }
    ]
  });
  return;
}

这里的index: 0表示当前激活的是数组里的第一个路由，嵌套的state则定义了Onboard这个StackNavigator的内部路由栈。

方法二：导航到Onboard时指定子路由并禁用初始路由 #

React Navigation支持在导航到嵌套导航器时，直接指定要跳转的子路由，同时通过initial: false参数阻止加载StackNavigator的默认初始路由：

if (onboardingCheckpointCleared) {
  navigation.navigate('Onboard', {
    screen: 'DesiredRoute',
    initial: false
  });
  return;
}

这个方法更简洁，screen参数指定Onboard内部要跳转的路由，initial: false告诉StackNavigator不要加载它配置的默认初始路由，这样最终的栈就只有DesiredRoute了。

注意事项 #

• 确保DesiredRoute已经正确注册到Onboard这个StackNavigator的路由列表中
• 两种方法都能达到你想要的效果，你可以根据自己的代码风格选择更合适的一种

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