React Navigation退出登录时清除栈并跳转至登录页的问题

你的问题核心是：调用this.props.navigation.goBack(null)退出登录时，没有回到登录页，反而回到了之前的订单页面2。这是因为goBack只是简单回退到导航栈的上一条记录，而你的导航栈中还保留着订单页面的历史，所以无法直接跳转到登录页。

正确的解决方案：重置整个导航栈 #

要实现“清除所有屏幕组件并跳转至登录页”的需求，你需要重置整个导航栈，将登录页设为栈中唯一的页面，彻底清除之前的所有页面记录。

根据你使用的React Navigation版本，这里提供两种常见实现方式：

方式1：React Navigation 4及以下版本 #

在退出登录的方法中，使用reset方法重置导航栈：

this.props.navigation.reset({
  index: 0,
  routes: [{ name: 'Login' }], // 'Login'是你的登录页路由名称
});

方式2：React Navigation 5+版本 #

导入CommonActions并使用dispatch执行重置操作：

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

// 退出登录的处理函数
const handleLogout = () => {
  this.props.navigation.dispatch(
    CommonActions.reset({
      index: 0,
      routes: [{ name: 'Login' }],
    })
  );
};

为什么不用goBack？ #

goBack(null)的作用是回到导航栈的上一个页面，它不会清空栈内的历史记录。而退出登录属于用户状态切换的关键操作，需要完全清除登录后的所有页面栈，确保用户再次操作时从登录页开始，所以重置栈是更合理的选择。

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