React Native中Firebase认证返回的photoURL头像无法正常显示怎么办

问题原因 #

你当前的操作存在两个核心错误：

1. 你存储的content://格式URI是安卓系统提供的本地临时授权访问路径，仅在当前应用运行会话内有效，应用重启、权限过期或者换设备后，都会失去该路径的读取权限，自然无法加载图片。
2. 你不需要把整个图片对象序列化后存入photoURL字段，该字段设计用途就是存储可直接访问的网络图片地址。

解决方案 #

可以将本地图片上传到Firebase Cloud Storage获取永久可访问的公共URL，再存入用户资料，操作步骤如下：

1. 先在项目中安装并配置@react-native-firebase/storage模块，完成Storage服务的初始化。
2. 调整图片上传、存储逻辑：

import auth from '@react-native-firebase/auth';
import storage from '@react-native-firebase/storage';

// 上传本地图片到Storage，返回永久下载链接
const uploadAvatarToStorage = async (pic) => {
  const currentUid = auth().currentUser.uid;
  // 生成唯一文件名，避免重名覆盖
  const avatarPath = `user_avatars/${currentUid}_${Date.now()}_${pic.name}`;
  const storageRef = storage().ref(avatarPath);
  // 直接传入document picker返回的本地uri即可完成上传
  await storageRef.putFile(pic.uri);
  // 获取永久可访问的下载链接
  return await storageRef.getDownloadURL();
}

// 更新用户资料时直接存永久链接
const updateUserProfile = async (fullname, pic) => {
  const avatarUrl = await uploadAvatarToStorage(pic);
  await auth().currentUser.updateProfile({
    displayName: fullname,
    photoURL: avatarUrl // 直接存字符串链接，无需序列化
  })
}

3. 后续读取头像时无需反序列化，直接使用链接即可：

const fireUser = auth().currentUser;
const avatarUrl = fireUser.photoURL;
// 直接赋值给Image组件的source属性即可，跨设备、跨会话都可正常加载

4. 建议配置Firebase Storage安全规则，避免资源被恶意读写：

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

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