Drawer Navigator退出登录跳转至Login页面失败问题求助

嘿，我来帮你排查这个跳转失效的问题，大概率是导航栈的层级或者跳转逻辑的问题，咱们一步步来解决：

1. 先理清导航结构的核心问题 #

你提到Dashboard是Drawer Navigator，但从你的App.js代码来看，你直接把Dashboard组件作为Stack Navigator的一个screen了。如果Dashboard本身是一个Drawer Navigator，那它内部页面的navigation对象是属于Drawer导航上下文的，而login是在父级的Stack Navigator里，直接调用navigate('login')自然找不到对应的路由。

解决方法：如果Dashboard是Drawer，你需要调用父级Stack的导航方法，通过dangerouslyGetParent()获取父级导航对象后再跳转：

onLogout = () => {
  console.log('sign out');
  // 获取父级Stack的导航实例，再跳转至login
  this.props.navigation.dangerouslyGetParent().navigate('login');
}

2. 更严谨的退出登录逻辑：重置导航栈 #

就算导航结构没问题，直接用navigate('login')会让Login页面回到栈中，但之前的Dashboard还留在栈里——用户按返回按钮会直接回到Dashboard，这显然不符合退出登录的逻辑。更合理的做法是重置整个导航栈，只保留Login页面：

首先导入StackActions：

import { StackActions } from 'react-navigation';

然后修改退出登录方法：

onLogout = () => {
  console.log('sign out');
  const resetAction = StackActions.reset({
    index: 0,
    actions: [
      StackActions.navigate({ routeName: 'login' })
    ],
  });
  this.props.navigation.dispatch(resetAction);
}

3. 小细节检查 #

• 你的代码里路由名称都是小写的login和dashboard，跳转时也对应上了，这点没问题，但要记住React Navigation的路由名称是区分大小写的，后续修改时要注意统一。
• 检查你的TouchableHighlight标签没有闭合，记得补全内容和闭合标签：

<TouchableHighlight underlayColor='lightgrey' activeOpacity={0.8} onPress={this.onLogout}>
  <Text>退出登录</Text>
</TouchableHighlight>

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