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

Question

我正在尝试在我的 React-native 应用程序中显示来自 Firebase 存储的图像。我通过此 async 函数获取下载 URL:

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

我的问题是如何将 URL 传递给图像组件。我试过:

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