如何在 expo 的 React Native 天才聊天中设置用户头像？

Posted 2023-02-19

【中文标题】如何在 expo 的 React Native 天才聊天中设置用户头像？

【英文标题】：How to set a users avatar in React Native gifted chat in expo?

【发布时间】：2021-05-24 05:20:12

【问题描述】：

我试图弄清楚如何从 Firestore 数据库中为每个用户设置一个图像作为用户的头像，但我不知道该怎么做。

我之前在另一个问题上发布了我的代码，但没有人回答，那么您从 Firebase Firestore 中提取用户图像并将其设置为头像的方法是什么？

目前，为了从 Firestore 获取用户 ID，我已经尝试过，但它不起作用。

async componentDidMount() 
  this.setState( user: firebaseApp.auth().currentUser );
  this.listenForMessages(this.messagesRef);
  const currentUserUID = firebaseApp.auth().currentUser.uid;
  let doc =  await firebaseApp
  .firestore()
  .collection('userProfile')
  .doc(currentUserUID)
  .get();
    
  let dataObj = doc.data();
   
 this.setState( avatar: dataObj.image); // CALLING IMAGE FROM DATABASE
    

【参考方案1】：

我会避免使用 Firestore 来存储您的头像图像。单个Firestore document 的大小不能超过 1 MB。

除非您控制允许的图像大小，否则您最终会很快超过文档限制。但是，如果您使用 Cloud Storage for Firebase 并且只将 URL 存储在 Cloud Firestore 中，您将占用更少的空间。

云存储在存储成本方面也更实惠，例如，如果您决定让头像更大，也不会限制您的存储需求。这种方法的另一个好处是managing the caching 可以加快图像检索速度。