React Navigation嵌套导航结合Redux的路由访问异常问题

嘿，我明白你踩的这个坑了——当把集成Redux的Tab Navigator嵌套在Stack Navigator里时，Tab内部的屏幕默认拿到的是Tab自己的navigation对象，而不是外层Stack的导航实例，所以自然只能看到Tab自己的路由，没法访问Stack里定义的Add Program Screen。

下面给你两个最直接的解决办法：

方法1：获取外层Stack的导航器（最常用） #

在Main Screen的跳转逻辑里，不要直接用当前的navigation，而是通过getParent()方法拿到外层Stack的导航对象，再调用跳转：

// Main Screen中的跳转函数
const goToAddProgram = () => {
  // 获取父级Stack的导航实例
  const stackNavigation = navigation.getParent();
  if (stackNavigation) {
    stackNavigation.navigate('Add Program Screen');
  }
};

这样就能直接调用外层Stack的导航能力，顺利跳转到目标页面了。

额外排查要点 #

为了确保万无一失，你可以再检查这两点：

• 确认Stack Navigator的路由定义正确，Tab和Add Program Screen都是Stack的直接子路由，比如：

const RootStack = createStackNavigator();

export default function AppStack() {
  return (
    <RootStack.Navigator>
      <RootStack.Screen name="TabNavigator" component={TabWithNavigator} />
      <RootStack.Screen name="Add Program Screen" component={AddProgramScreen} />
    </RootStack.Navigator>
  );
}

注意跳转时用的路由名称要和这里的name完全一致，大小写、空格都不能错。

• 检查嵌套结构：确保是Stack包裹Tab，而不是Tab包裹Stack，这是最容易搞反的点。

如果你之前打印navigation对象的话，应该能看到Tab内部的navigation的routes数组只有Tab自己的屏幕，而父级navigation的routes才包含Stack的所有路由，这也能验证我们的结论。

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