在本机反应中显示来自firebase的图像（命中错误）

Question

在一个屏幕上，我正在拍摄一张图片，它正在上传到 firebase，但在另一个页面上，当我尝试下载图片以显示它时，我遇到了一个错误，但该错误是随机出现的。如果我将 url 复制并粘贴到 image src 中，它可以工作。

我还可以从图像中控制日志详细信息，但由于某种原因显示它时出现错误。

export default function DisplayPage() {
    const imageRef = firebase.storage().ref().child('images');
    const sampleImage = imageRef.getDownloadURL();
return (
     <View>
        <Image source={{ uri: sampleImage }} style={{ width: 350, height: 350 }} />
     </View>
  );
}

我正在另一个页面上传文件

 const ref = firebase
        .storage()
        .ref()
        .child('images')
    }

我只想有一个页面来显示我所在文件中的所有图像，但我什至无法显示一个图像。

我在这里做错了什么？

编辑： 我得到它的代码错误，它只是指世博会中的一些随机文件并阻止应用程序启动（因此我没有发布它的原因）但下面的回复实际上回答了我的问题。我唯一想知道的是你将如何显示整个文件夹而不是只显示一张图片。这会放在child() 中吗？我在child() 和ref() 都试过了，都失败了。

感谢大家的帮助！

Answer 1

我已将 getDownloadURL 方法包装在异步中，因为从中获取图像需要时间，并且视图最初在页面加载时为 render，因此在从 getDownloadURL 获取图像之前不会渲染图像.所以，我使用了 state ，它在 state 重置图像时再次呈现视图，这次它成功加载了图像。

export default function DisplayPage() {

    const [sampleImage, setSampleImage] = useState(); // set state here

    const getSampleImage = async () => {
       const imageRef = firebase.storage().ref().child('images');
       const url = await imageRef.getDownloadURL().catch((error) => { throw error });
       setSampleImage(url);
    }

   // Similar to componentDidMount and componentDidUpdate:
   useEffect(() => {
    getSampleImage();
   });

   return (
     <View>
        {sampleImage ? <Image source={{ uri: sampleImage }} style={{ width: 350, height: 350 }} /> : null }
     </View>
   );
}