Блог

Я пытаюсь загрузить изображение из хранилища Firebase и отобразить его в своем приложении. Я пытаюсь получить URL-адрес для загрузки следующим образом:

 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, я получаю следующую ошибку:

Ошибка ссылки: не удается найти переменную: url

Это, конечно, означает, что я не могу вызвать URL-адрес, когда пытаюсь отобразить изображение следующим образом:

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

Есть идеи о том, как подойти к этой проблеме и решить ее? Большое спасибо!

Решение состоит в том, чтобы сохранить 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));
 

Это не только гарантирует, что метод визуализации сможет его найти, но также и то, что выходные данные будут повторно отображены после вычисления URL.

Если вы используете перехваты, у вас будет что-то вроде:

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