时间戳

首页 > 解决方案 > 从 Firebase 下载图像（React Native）

javascript - 从 Firebase 下载图像（React Native）

问题描述

我正在尝试从 Firebase Storage 下载图像并将其显示在我的应用中。我试图获取下载网址的方式如下：

let imageRef = firebase.storage().ref('users/' + firebase.auth().currentUser.uid + '/' + 'userImage');
    imageRef
    .getDownloadURL()
    .then((url) => {
    console.log(url)
    })
    .catch((e) => console.log('getting downloadURL of image error => ', e));

现在，这完美地注销了 url。但是，无法从此功能之外访问它。如果我尝试在 .catch 之后立即访问它，则会收到以下错误：

ReferenceError：找不到变量：url

这当然意味着当我尝试以下列方式显示图像时，我无法调用 url：

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

关于如何解决这个问题并解决它的任何想法？非常感谢！

标签： javascriptreactjsfirebasereact-nativefirebase-storage

解决方案

解决方案是将 URL 存储在组件的状态中，而不是存储在变量中：

let imageRef = firebase.storage().ref('users/' + firebase.auth().currentUser.uid + '/' + 'userImage');
    imageRef
    .getDownloadURL()
    .then((url) => {
      setState({ url: url });
    })
    .catch((e) => console.log('getting downloadURL of image error => ', e));

这不仅可以确保 render 方法可以找到它，而且可以在计算 URL 后重新渲染输出。

如果你使用 hooks，你会有类似的东西：

const [url, setUrl] = useState();

let imageRef = firebase.storage().ref('users/' + firebase.auth().currentUser.uid + '/' + 'userImage');
    imageRef
    .getDownloadURL()
    .then((url) => {
      setUrl(url);
    })
    .catch((e) => console.log('getting downloadURL of image error => ', e));

推荐阅读