React Navigation 5嵌套屏幕跳转异常：点击退出登录无法跳转至Login页面

问题原因 #

你的导航层级结构如下：

根Stack导航（全局注册路由：Login、BottomTabs）
└── BottomTabs（Tab导航，注册路由：Profile、Gobble、Matches、Chats）
└── Profile页面（当前操作页面）

你尝试的三种写法全部存在逻辑错误：

1. props.navigation.navigate('BottomTabs', {screen: 'Login'})：Login不是BottomTabs导航下的注册路由，在Tab导航的路由列表中找不到对应路由，无响应。
2. navigation.navigate('BottomTabs', {screen: 'App', params: {screen: 'Login'})：App是项目根组件，不属于任何导航器注册的路由名，不存在对应路由，无响应。
3. navigation.navigate('Login')无响应的核心原因：Profile页面拿到的navigation默认是BottomTabs Tab导航的实例，默认只会在Tab导航自身的路由列表中查找Login，找不到则无响应。

解决方法 #

React Navigation 5版本中嵌套导航跨层级跳转，需要先获取父级（根Stack导航）的实例再操作，写法如下：

// 普通跳转写法
props.navigation.dangerouslyGetParent().navigate('Login')

// 退出登录场景更推荐用replace，直接替换当前路由栈，防止用户按返回键退回登录后页面
props.navigation.dangerouslyGetParent().replace('Login')

如果跳转仍异常，可以通过以下代码校验是否正确获取了根Stack导航实例：

// 打印根导航的所有注册路由，输出包含Login、BottomTabs即为正确
console.log(props.navigation.dangerouslyGetParent().getState().routeNames)

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