React Native中AsyncStorage.setItem调用后应用未自动跳转如何解决

• App组件中的loginStatus状态仅在组件挂载时读取了一次AsyncStorage，后续修改AsyncStorage的登录状态时，没有触发App组件的状态更新，自然不会触发导航切换，只有刷新App才会重新走挂载逻辑读取Storage。
• 你当前signOut方法存储的是字符串'false'，虽然JSON.parse后会得到布尔值false，但直接存布尔值更稳妥，可避免后续类型判断出错。

方案1：全局状态同步（推荐，适配你已引入Mobx的现状） #

1. 在storeMain.js中新增登录状态相关定义：

import { makeAutoObservable } from 'mobx';
class MainStore {
  // 原有其他状态保留
  loginStatus = false;
  constructor() {
    makeAutoObservable(this);
  }
  setLoginStatus = (val) => {
    this.loginStatus = val;
  }
}
export const mainStore = new MainStore();

2. 修改App组件，用observer包裹后直接读取store的登录状态：

import React, { useEffect } from 'react';
import { NavigationContainer } from '@react-navigation/native'
import { observer } from 'mobx-react';
import { mainStore } from './components/store/storeMain';

import AppNavigator from './components/auth/AppNavigator';
import AuthNavigator from './components/auth/AuthNavigator'
import AuthStorage from './components/auth/storage';

const App = observer(() => {
  useEffect(() => {
    initLoginStatus();
  }, []);

  const initLoginStatus = async () => {
    try {
      const isLoggedIn = await AuthStorage.getItem();
      if (isLoggedIn !== null) {
        mainStore.setLoginStatus(isLoggedIn);
      }
    } catch (e) {
      alert('Failed to fetch the data from storage');
    }
  };

  return (
    <NavigationContainer>
      {mainStore.loginStatus ? <AppNavigator /> : <AuthNavigator />}
    </NavigationContainer>
  );
});

export default App;

3. 登录、登出操作时同时更新Storage和全局状态：

// 登录逻辑处调用
const handleLoginSuccess = async () => {
  // 原有登录逻辑保留
  await AuthStorage.storeItem(true);
  mainStore.setLoginStatus(true);
}

// 登出方法修改
const signOut = async () => {
  await AuthStorage.storeItem(false);
  mainStore.setLoginStatus(false);
  console.log('Clear');
}

方案2：事件通知更新（无需修改现有状态结构） #

如果不想改动Mobx的现有代码，可以用事件总线通知App组件刷新状态：

1. App组件新增登录状态变更监听：

import { DeviceEventEmitter } from 'react-native';

const App = () => {
  const [loginStatus, setLoginStatus] = useState(false);

  useEffect(() => {
    readData();
    // 监听状态变更事件
    const loginListener = DeviceEventEmitter.addListener('LOGIN_STATUS_UPDATED', readData);
    return () => loginListener.remove();
  }, []);

  // 原有readData方法保持不变
}

2. 登录、登出操作完成后发送事件：

const signOut = async () => {
  await AuthStorage.storeItem(false);
  DeviceEventEmitter.emit('LOGIN_STATUS_UPDATED');
  console.log('Clear');
}

你现有AppNavigator.js中的CustomTabBarButton组件没有拿到navigation参数，建议用useNavigation钩子在组件内部获取导航实例，避免props传参丢失导致的跳转异常。

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