Retrieving/Handling 图片 URL 来自 Firestore - React Native

Question

我是 React Native 和 Firebase (Firestore) 的新手，我正在开发一个应用程序，我必须在其中检索 posts 到我的 feed。

我可以检索到我需要的所有数据，但我不知道如何在前端显示图像。 post 文档有一个字段图像，它被保存为 URL 并存储在 Firebase 存储中。

有谁知道如何显示图像？我正在使用 a 对数据进行排序。

这是我的 retrieveData()，它打印出正确的 URL:

  retrieveData() {
    var that = this;
    let postRef = firebase
      .firestore()
      .collection("posts")
      .orderBy("timestamp", "desc")
      .limit(10);
    let allPosts = postRef
      .get()
      .then((snapshot) => {
        snapshot.forEach((doc) => {
          var post = that.state.posts;
          const data = (doc.id, "=>", doc.data());
          that.setState({ posts: post });
          console.log(data.image);
          post.push({
            id: data.id,
            title: data.title,
            description: data.description,
            expireDate: data.expireDate,
            timestamp: data.timestamp,
            image: data.image,
          });
        });
      })
      .catch((err) => {
        console.log("Error getting documents", err);
      });
  }

这就是我在平面列表中调用图像的方式：

<Image
   source={post.image}
   style={styles.postImage}
/>

有人可以帮我吗？

提前致谢。

Answer 1

你能分享图片吗url？首选方法是将图像存储在 firebase 存储上并获取 downloadUrl，然后将 url 存储在 firestore 文档中。

fileref.put(file)
.then(snapshot => {
   return snapshot.ref.getDownloadURL();   // Will return a promise with the download 
 link
})

.then(downloadURL => {
  console.log(`Successfully uploaded file and got download link - ${downloadURL}`);
  return downloadURL;
 })

.catch(error => {
  // Use to signal error if something goes wrong.
  console.log(`Failed to upload file and get link - ${error}`);
});

Retrieving/Handling 图片 URL 来自 Firestore - React Native

Retrieving/Handling Image URL From Firestore - React Native

firebase

react-native

react-native-flatlist

google-cloud-firestore