React Native Firebase - 如何从 Firebase 存储中检索图像并在图像组件中显示？答案

【问题标题】：React Native Firebase - How to retrieve images from firebase storage and display in Image component?React Native Firebase - 如何从 Firebase 存储中检索图像并在图像组件中显示？
【发布时间】：2018-10-26 14:19:44
【问题描述】：

从 firebase.storage().ref('asd') 获取图像的 ref 后，如何在此处检索图像并分配给 Image 组件？

const ref = firebase.storage().ref('path/to/image.jpg');

<Image
  source={?}
/>

【问题讨论】：

现在您的查询只存储对路径的引用。你会想要.get() 那个数据。检索数据后，您可以循环浏览并相应地分配其源引用。有关get 的更多数据，请查看文档：firebase.google.com/docs/firestore/query-data/get-data

标签： react-native react-native-firebase

【解决方案1】：

您可以在引用上调用 getDownloadURL() 以获取图像的 URL，然后可以将其作为 URI 源传递给 Image 组件，例如：

const ref = firebase.storage().ref('path/to/image.jpg');
const url = await ref.getDownloadURL();

// ... in your render

<Image
  source={{ uri: url }}
/>

文档：

v5：https://rnfirebase.io/docs/v5.x.x/storage/reference/Reference#getDownloadURL

v6：https://invertase.io/oss/react-native-firebase/v6/storage/reference/reference#getDownloadURL

【讨论】：

升级到V6后，在putFile方法的结果对象中找不到下载地址。你有什么想法吗？
const url = await ref.getDownloadUrl();这里的方法调用是错误的，应该是： const url = await ref.getDownloadURL(); （最后三个字母大写）
"请注意，对于网络和数据图像，您需要手动指定图像的尺寸！" - reactnative.dev/docs/image
尝试使用这个答案，但是我收到关于“等待”的错误以及它必须如何在异步函数中？

【解决方案2】：

这可能会迟到，但这对我有用。我已经对存储提出了单独的请求，getDownloadURL() 在 rnfirebase v6 中的 putFile() 上不可用。

const ref = firebase.storage().ref("images/name.jpg");
ref.getDownloadURL()
.then(url => {console.log(url)})
.catch(e=>{console.log(e);})

【讨论】：

我们会解决这个问题 - UploadTaskSnapshot 上应该有这个 API