React Native使用Mobx做状态管理时无法跳转导航菜单问题求解

修复步骤 #

1. 修复Mobx Store #

import { action, makeObservable, observable } from "mobx";
import React from "react";

class TokenValue{
    // 标记token为可观察状态
    token = false;
    constructor() {
        makeObservable(this, {
            token: observable,
            unsetToken: action,
            setToken: action
        })
      }
    // 只有修改状态的方法需要标记为action
    setToken(){
        this.token = true;
    }
    unsetToken(){
        this.token = false;
    }
    // 读取方法不需要标记为action，直接返回真实的token值即可
    getToken(){
        return this.token ?? false;
    }
}

const tokenValueStore = new TokenValue();
export const TokenStoreContext = React.createContext(tokenValueStore);
export const useTokenStore = () => React.useContext(TokenStoreContext)

2. 修复导航配置 #

import { observer } from "mobx-react-lite" // 引入observer

// 用observer包裹AppStack，让组件可以响应Mobx状态变更
const AppStack = observer(() => {
  const tokenStore = useTokenStore()
  // 直接读取store的token值，不需要冗余的useState和useEffect同步本地状态
  const userToken = tokenStore.getToken()

  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}
      initialRouteName="login"
    >
      {!userToken ? (
        <>
          <Stack.Screen name="login" component={LoginScreen} />
          <Stack.Screen name="signup" component={SignupScreen} />
          <Stack.Screen name="resetpassword" component={ResetPasswordScreen} />
          <Stack.Screen name="demo" component={DemoScreen} />
          <Stack.Screen name="demoList" component={DemoListScreen} />
          <Stack.Screen name="welcome" component={WelcomeScreen} />
          {/* 可选：把dashboard也加到未登录路由列表，避免跳转时找不到路由报错 */}
          <Stack.Screen name="dashboard" component={DashboardScreen} />
        </>
      ) : (
        <>
          <Stack.Screen name="dashboard" component={DashboardScreen} />
        </>
      )}
    </Stack.Navigator>
  )
})

3. 修复登录页跳转逻辑 #

你不需要手动调用navigation.navigate('dashboard')，token更新后AppStack会自动重渲染，直接切换到dashboard路由。如果要保留手动跳转的逻辑，只要确保dashboard路由已经被提前注册到导航栈中即可。

最佳实践建议 #

• 权限路由更稳妥的实现方式是全局注册所有路由，配合React Navigation的全局路由守卫做跳转拦截，避免出现找不到路由的报错
• Mobx不需要额外的状态订阅API，只要用observer包裹组件，直接读取observable属性就能自动响应状态变化
• 不要把Mobx的全局状态同步到组件本地state，避免出现多源状态不同步的问题

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