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

Question

我正在尝试在我的 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))- 但我不知道如何在我的情况下使用它。

Answer 1

它可能不是更干净的解决方案，因为我仍在学习 React Native 和 Firebase 产品，但是，这就是我所做的：

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

@react-native-firebase和文档

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}} />
);