React Native登录状态保持：返回时避免进入登录页的实现方法

你现在的问题是登录成功后跳转到主页面，但返回时还会回到登录页，核心原因是登录页仍保留在导航栈中。要解决这个问题，关键是在登录成功后修改导航栈，将登录页从栈中移除，具体实现方式如下：

1. 重置导航栈，让主页面成为根节点 #

不要用navigate方法跳转，改用reset重置整个导航栈，把主页面设为栈的唯一页面，这样返回操作就没有上一页可跳转了。

修改登录成功后的导航代码：

// 替换原来的 props.navigation.navigate(SCREEN.tab);
props.navigation.reset({
  index: 0,
  routes: [{ name: SCREEN.tab }],
});

如果是React Navigation 6及以上版本，也可以用replace方法直接替换当前栈顶的登录页为主页面，效果一致：

props.navigation.replace(SCREEN.tab);

2. 启动时直接判断登录状态（推荐优化） #

为了提升用户体验，建议在APP启动时先检查本地是否有保存的Token或登录凭证，若存在则直接进入主页面，无需经过登录页。可以在根导航组件中添加判断逻辑：

useEffect(() => {
  const checkLoginStatus = async () => {
    // 从钥匙串获取保存的登录凭证
    const savedCredentials = await Keychain.getGenericPassword();
    // 从redux或本地存储获取有效Token
    const savedToken = store.getState().auth.token;
    
    if (savedCredentials && savedToken) {
      // 已登录，直接跳转主页面
      navigation.reset({
        index: 0,
        routes: [{ name: SCREEN.tab }],
      });
    } else {
      // 未登录，进入登录页
      navigation.navigate(SCREEN.login);
    }
  };
  checkLoginStatus();
}, []);

3. 优化现有登录代码的小问题 #

你提供的onSubmit代码有几个可调整的细节：

• 无需手动嵌套new Promise，若login方法支持Promise，直接用async/await更简洁
• onError中的reject未调用，需传入错误参数
• 保存凭证时要使用表单的values.username和values.password，避免变量不匹配

优化后的代码示例：

const onSubmit = async (values: { username: string; password: string }) => {
  const credentials = await Keychain.getGenericPassword();
  try {
    const data = await login(values);
    dispatch(
      auth({
        user: true,
        token: data?.data,
      }),
    );
    // 仅在未保存凭证时存储
    if (!credentials) {
      await Keychain.setGenericPassword(values.username, values.password);
    }
    // 重置导航栈，移除登录页
    props.navigation.reset({
      index: 0,
      routes: [{ name: SCREEN.tab }],
    });
  } catch (error) {
    // 这里可添加错误提示，比如Toast告知用户登录失败
    console.error('登录出错:', error);
  }
};

完成以上修改后，用户登录成功后导航栈中仅保留主页面，返回时就不会回到登录页了。

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