React Native认证问题：登录/登出时导航栈未自动切换

问题原因 #

React组件默认不具备Mobx响应式追踪能力，直接在组件中引用Mobx Store的observable或computed属性时，组件无法感知到这些属性的变化，因此不会触发重新渲染，useEffect的依赖也不会生效。

解决方案 #

1. 安装Mobx React绑定库 #

确保项目中已安装mobx-react-lite（针对函数组件）：

npm install mobx-react-lite
# 或
yarn add mobx-react-lite

2. 用observer包裹App组件 #

修改App.js，导入observer并包裹根组件，让组件能够追踪Mobx Store的状态变化：

import React, { useEffect } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { observer } from "mobx-react-lite"; // 新增导入

import AuthStore from "./src/stores/AuthStore";
import AuthStackNavigator from "./src/navigation/AuthStackNavigator";
import UnAuthStackNavigator from "./src/navigation/UnAuthStackNavigator";

const App = observer(() => { // 用observer包裹组件
  useEffect(() => {
    console.log("APP JS", AuthStore.userAuthenticated);
  }, [AuthStore.userAuthenticated]);

  return (
    <NavigationContainer>
      {AuthStore.userAuthenticated ? <AuthStackNavigator /> : <UnAuthStackNavigator />}
    </NavigationContainer>
  );
});

export default App;

3. 优化Store重置逻辑 #

调整AuthStore中的logout方法，确保observable属性重置更安全：

async logout() {
  await clearStorage();
  this.user = {}; // 重置为空对象，避免后续引用user属性时出现undefined错误
  this.token = undefined;
  this.refreshToken = undefined;
  this.decodedToken = undefined;
}

原理说明 #

observer函数会将React函数组件转换为响应式组件，自动追踪组件中使用的Mobx observable和computed属性。当这些属性变化时，组件会自动重新渲染，useEffect的依赖数组也会触发对应逻辑。

修改后，用户登录/登出时，AuthStore的token变化会触发userAuthenticated计算属性更新，observer包裹的App组件会感知到变化并重新渲染，从而自动切换导航栈，无需重启App。

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