React Native(Expo)从AsyncStorage加载用户信息后无法渲染内容

根据你的描述，控制台能正常打印用户信息但界面无法显示对应文本，最可能的原因是你使用了className属性但未配置对应的样式解析工具（比如NativeWind），React Native原生组件并不支持className，导致SafeAreaView的布局样式失效，文本可能处于屏幕可视区域外，看起来像是未渲染。

解决方案1：替换className为原生style属性 #

修改OverviewScreen中的SafeAreaView，将className替换为React Native支持的style对象：

import { Text, StyleSheet } from 'react-native';
import React, { useEffect, useState } from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
import storage from '../utils/storage';

export default function OverviewScreen() {
  const [user, setUser] = useState(null);

  const { getUser } = storage();

  useEffect(() => {
    getUser().then((u) => {
      setUser(u);
    });
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      {!user ? (
        <Text>Loading...</Text>
      ) : (
        <Text>Hello {user.username}</Text>
      )}
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  }
});

其他排查点 #

如果上述修改后仍未解决，可以进一步排查：

• 确认存储的用户对象确实包含username字段：在getUser的回调中打印u.username，确保该属性存在且有值
• 验证组件是否触发了重新渲染：在渲染分支中添加日志，确认是否执行到了Hello {user.username}的渲染逻辑
• 检查AsyncStorage的写入是否正确：在登录完成后，调用getUser验证存储的用户数据是否完整

内容的提问来源于stack exchange，提问作者David O.