Expo iOS模拟器下React Native App重载后保持用户登录的问题

核心问题原因 #

你当前的问题出在App启动阶段未优先读取AsyncStorage中持久化的用户信息：关闭App再打开时（非重载），内存中可能还保留了登录状态，因此能维持登录；但重载后内存状态被清空，若不主动从持久化存储读取用户数据，就会直接进入登录流程。

具体修复步骤 #

1. 在App.js启动时检查登录状态 #

修改App.js的初始化逻辑，组件挂载时先读取AsyncStorage的用户数据，根据结果决定渲染首页还是登录页：

import { useEffect, useState, View, Text } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import Login from './Login';
import Home from './Home'; // 替换为你的首页组件

export default function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    checkSavedLoginStatus();
  }, []);

  const checkSavedLoginStatus = async () => {
    try {
      // 读取你存储用户信息的key，需和登录时的key一致
      const savedUser = await AsyncStorage.getItem('userInfo');
      if (savedUser) {
        // 存在有效用户数据则标记为已登录
        setIsLoggedIn(true);
      }
    } catch (err) {
      console.error('读取用户信息失败:', err);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    // 加载过渡，避免界面闪跳
    return (
      <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
        <Text>加载中...</Text>
      </View>
    );
  }

  return isLoggedIn ? <Home /> : <Login />;
}

2. 确保登录成功后正确存储用户信息 #

检查Login.js的登录逻辑，登录成功后必须将用户数据序列化存入AsyncStorage：

// Login.js中登录成功的代码片段
const handleLogin = async () => {
  try {
    const userData = await DBAdapter.login(username, password); // 你的登录接口
    if (userData) {
      // 序列化后存储，key要和App.js中读取的一致
      await AsyncStorage.setItem('userInfo', JSON.stringify(userData));
      navigation.navigate('Home');
    }
  } catch (err) {
    console.error('登录失败:', err);
  }
};

3. 完善登出逻辑（可选但必要） #

如果有登出功能，记得清除AsyncStorage中的用户信息：

const handleLogout = async () => {
  await AsyncStorage.removeItem('userInfo');
  navigation.navigate('Login');
};

排查注意事项 #

• 确保AsyncStorage的key前后完全一致，比如存用'userInfo'，读也必须用同一个key
• 存储时必须用JSON.stringify序列化对象，读取后若要使用具体字段，需用JSON.parse解析
• Expo环境下AsyncStorage无需额外配置，但iOS模拟器重置后会清空存储数据

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