如何在 react native expo 中从 firebase 检索图像？

Question

我是 React Native 的新手，仍在边做边学。我已经在 firebase 中上传了我想在第二个屏幕上显示的图像。虽然，我不断收到类似的错误

can't find variable: profileImageUrl 

我正在尝试检索下一页上的图像。

这是上传到firebase的代码：

const uploadImage = async () => {
  const blob = await new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = function () {
      resolve(xhr.response);
    };
    xhr.oneerror = function () {
      reject(new TypeError('Network request failed'));
    };
    xhr.responseType = 'blob';
    xhr.open('GET', image, true);
    xhr.send(null);
  });

  const ref = firebase.storage().ref().child('/ankit/');

  const snapshot = ref.put(blob);

  snapshot.on(
    firebase.storage.TaskEvent.STATE_CHANGED,
    () => {
      setUploading(true);
    },

    (error) => {
      setUploading(false);
      console.log(error);
      blob.close();
    },
    () => {
      snapshot.snapshot.ref.getDownloadURL().then((url) => {
        setUploading(false);
        console.log('downlaod url', url);
        return url;
      });
    }
  );
};

这里是检索代码：

const [Image, setImage] = useState(false);

let imageRef = firebase.storage().ref('/ankit/');
imageRef
  .getDownloadURL()
  .then((url) => {
    setImage({ profileimageUrl: 'url' });
  })
  .catch((e) => console.log('getting downloadURL of image error => ', e));

return (
  <View>
    <Image source={this.state.profileImageUrl}></Image>
  </View>
)

Answer 1

您应该重构显示图像的代码。您正在使用新的钩子状态来存储状态，但尝试在 html 中使用旧的反应状态语法的语法。应该是这样的：

const [image, setImage] = useState(false);

useEffect(() => {
  let imageRef = firebase.storage().ref('/ankit/');
  imageRef
    .getDownloadURL()
    .then((url) => {
      setImage(url);
    })
    .catch((e) => console.log('getting downloadURL of image error => ', e));
},[])

return (
  <View>
    <Image src={image}></Image>
  </View>
);