React Native登录状态异常：未登录仍跳转至首页问题排查

你的代码核心问题在于AsyncStorage返回的是字符串类型，而非布尔值。当调用AsyncStorage.getItem("KeepLoggedIn")时，返回值是"true"、"false"或null，你直接将这个字符串赋值给isLoggedIn。在JavaScript中，非空字符串（包括"false"）都会被判定为真值，所以即使存储的是"false"，isLoggedIn也会被视为true，导致始终跳转到首页。

修复方案 #

1. 正确转换AsyncStorage返回值的类型 #

修改checkAuthenticationStatus函数，把字符串转换为布尔值：

useEffect(() => {
  const checkAuthenticationStatus = async () => {
    const authValue = await AsyncStorage.getItem("KeepLoggedIn");
    // 转换为布尔值：仅当authValue是"true"时才设为true，其余情况（包括null）设为false
    setIsLoggedIn(authValue === "true");
  };

  checkAuthenticationStatus();
}, []);

2. 增加加载状态优化体验 #

初始渲染时isLoggedIn为false，但AsyncStorage还在读取数据，可能出现先显示登录页再跳转首页的闪烁问题。可以新增加载状态：

const [isLoggedIn, setIsLoggedIn] = useState(false);
const [isLoading, setIsLoading] = useState(true); // 新增加载状态

useEffect(() => {
  const checkAuthenticationStatus = async () => {
    const authValue = await AsyncStorage.getItem("KeepLoggedIn");
    setIsLoggedIn(authValue === "true");
    setIsLoading(false); // 读取完成后结束加载
  };

  checkAuthenticationStatus();
}, []);

// 加载过程中显示加载组件
if (isLoading) {
  return <View style={{flex:1, justifyContent:'center', alignItems:'center'}}><ActivityIndicator size="large" /></View>;
}

3. 确保登录时存储正确的字符串 #

检查Login组件中设置KeepLoggedIn的代码，确保存储的是字符串形式的布尔值（AsyncStorage仅支持字符串存储）：

// 登录成功后存储状态
await AsyncStorage.setItem("KeepLoggedIn", "true");
// 或用JSON.stringify转换布尔值为字符串
// await AsyncStorage.setItem("KeepLoggedIn", JSON.stringify(true));

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