React Navigation嵌套导航下如何从底部Tab页跳转回外层Stack的Login页面

报错的核心原因 #

你在Settings页面直接执行navigate('Login')会触发报错，本质是两个问题叠加导致的：

• 每个页面组件拿到的this.props.navigation，默认只对应离它最近的父级导航器——你这里Settings页的上层是Bottom Tab导航，这个导航的路由表只注册了Home、Settings两个页面，根本没有Login对应的路由项，导航动作自然找不到目标页面。
• 你代码里还有个结构硬伤：NavigationContainer是整个App根导航专属的容器组件，绝对不能放在作为子路由的Principal页面内部包裹Tab导航，多写这层容器会直接切断两层导航的上下文连通，哪怕后续写对了导航逻辑也会失效。

先修正Principal页面的错误结构：

const Tab = createBottomTabNavigator();

// 删掉原来包裹Tab的<NavigationContainer>标签
class ConnectNavigator extends React.Component {
  render() {
    return (
      <Tab.Navigator>
        <Tab.Screen name="Home" component={CheckPage} />
        <Tab.Screen name="Settings" component={SettingPage} />
      </Tab.Navigator>
    );
  }
}

具体跳转实现 #

修正结构问题后，直接在Settings页面通过导航实例的方法逐层拿到外层Stack导航的控制权，两种场景对应两种实现：

普通跳转场景 #

如果需要正常从Settings页切到Login页，保留导航栈的历史记录，可以调用navigation提供的getParent()方法拿到上层RootStack的实例：

// SettingPage组件内的跳转方法
goToLogin = () => {
  // 拿到当前导航（Tab导航）的父级，也就是顶层RootStack导航
  const rootStack = this.props.navigation.getParent();
  // 调用拿到的Stack导航执行跳转
  rootStack.navigate('Login');
}

登出跳转场景 #

如果是用户退出登录后跳转到Login页，需要清空之前的页面历史（避免用户按返回键又回到已登录的Principal页面），就用Stack的重置动作替换导航栈：

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

logoutToLogin = () => {
  const rootStack = this.props.navigation.getParent();
  // 清空整个导航栈，直接把Login设为唯一的根路由
  rootStack.dispatch(StackActions.replace('Login'));
}

常见避坑点 #

• 嵌套导航不要重复写NavigationContainer：这个组件全App只需要在最根节点的导航层写一次，子级导航直接放对应导航器组件即可。
• 跨层跳转不要硬匹配目标路由名：所有导航动作默认只在当前所属的最近导航器内查找路由，跨层必须先拿到对应层级的导航实例再执行动作。

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