React Native Image组件显示空白问题求助

根据你提供的代码，以下是几个导致Image组件空白的关键问题及修复方案：

1. 图片上传参数错误，导致存储的图片损坏 #

在ImagePickerBtn的pickImage函数中，你已经将图片转换为Blob，但上传时错误地传入了本地路径result.uri，而非转换后的blob。这会导致Firebase Storage存储的不是图片文件，而是路径字符串，最终下载的URL无法正常显示图片。

修复代码：

// 将这一行
await uploadBytes(fileRef, result.uri);
// 替换为
await uploadBytes(fileRef, blob);

2. 上传成功后未刷新用户信息 #

图片上传到Firestore后，UserProfile组件没有重新获取最新的userInfo，导致Image组件使用的还是旧数据（或初始空数据）。

修复方案：

• 给ImagePickerBtn添加上传成功的回调，通知父组件刷新数据：

// ImagePickerBtn组件修改
export const ImagePickerBtn = ({ onUploadSuccess }) => {
  // ... 其他代码
  if (!result.canceled) {
    // ... 上传流程代码
    await updateProfile(currUser, {photoURL: url});
    // 上传成功后触发回调
    onUploadSuccess?.();
  }
}

// UserProfile组件中使用
<ImagePickerBtn onUploadSuccess={() => getUserInfo(currUser.email)} />

• 同时优化UserProfile中的useEffect依赖，确保用户信息变化时重新获取：

useEffect(() => {
  if (currUser?.email) {
    getUserInfo(currUser.email);
  }
}, [currUser.email]); // 添加currUser.email作为依赖

3. Image组件的URI未处理初始空值 #

初始渲染时userInfo可能为undefined，直接访问userInfo.photoUrl会导致URI无效，需要添加可选链保护：

修复代码：

<Image
  style={styles.photo}
  source={{
    uri: userInfo?.photoUrl, // 添加可选链
  }}
  resizeMethod="resize"
  resizeMode="contain"
/>

4. 检查Firebase Storage访问权限 #

确保Storage的规则允许已认证用户读取图片（测试阶段可临时放宽规则，上线后需调整为安全规则）：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

完成以上修复后，重新上传图片，Image组件应该能正常显示图片了。

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