如何在 React-native 中显示来自 Firebase 存储的图像？答案

【问题标题】：How to display Image from Firebase storage in React-native?如何在 React-native 中显示来自 Firebase 存储的图像？
【发布时间】：2020-11-06 14:44:46
【问题描述】：

我正在尝试在我的 React-native 应用中显示来自 Firebase 存储的图像。我通过这个async函数获取下载地址：

async function getImage() {
  const url = await storage()
  .ref('garnele.jpg')
  .getDownloadURL()
  console.log(url)
  return url
}

我的问题是如何将 URL 传递给 Image 组件。我试过了：

<Image
    source={{uri: getImage() }}
 />

但它只返回对象。

我还找到了getImage().then(result => console.log(result)) - 但我不知道如何在我的情况下使用它。

【问题讨论】：

本人没有React经验，但相关问题建议将异步函数的返回值存储在组件的状态中：stackoverflow.com/questions/59070347/…stackoverflow.com/questions/55929760/…
非常感谢，这是我一直在寻找的帖子！

标签： javascript firebase async-await react-native-android firebase-storage

【解决方案1】：

这可能不是更清洁的解决方案，因为我仍在学习 react native 和 firebase 产品，但是，这就是我所做的：

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

@react-native-firebase 和 doc

const [imageUrl, setImageUrl] = useState(undefined);

useEffect(() => {
    storage()
      .ref('/' + 'FA984B65-38D4-44B1-BF02-4E7EF089773B.jpg') //name in storage in firebase console
      .getDownloadURL()
      .then((url) => {
        setImageUrl(url);
      })
      .catch((e) => console.log('Errors while downloading => ', e));
  }, []);

return (
    <Image style={{height: 200, width: 200}} source={{uri: imageUrl}} />
);

【讨论】：