React-Native: 从 Firebase 存储下载图片

Question

前提信息：

我仍然拥有一个Firebase项目，并且成功地使用Firebase数据库（所以firebase.initializeApp(config)有效)。 我在Firebase存储中上传了几张图片，放在文件夹“/Images/”中，并将它们命名为image1.jpg，image2.jpg等。

React-Native版本：0.31.0， Firebase版本：3.3.0

我的需求：

我想从Firebase存储中获取图像，并将它们放入一个<Image>标签中。

我实际上做了什么：

var storageRef = firebase.storage().ref('Images/image1.jpg');

//1. Try:
storageRef.getDownloadURL().then(function(url) {
  console.log(url);
)}

//2. Try:
var sampleImage = storageRef.getDownloadURL().then(function(url) {
  console.log(url);
)}

//3. Try:
var sampleImage = storageRef.getDownloadURL();

代码信息：

1. 代码未到达console.log(url)的点

   2.1. 尝试在<Image>对象中使用sampleImage作为source：空白图片

   2.2. 尝试输出sampleImage：undefined

   2.3. 尝试输出url：没有到达此处

   3.1. 尝试在<Image>对象中使用sampleImage作为source：空白图片

   3.2. 尝试输出sampleImage：{ F: 0, ka: undefined, o: { F: 0, ... } }

所有尝试在2-3分钟后返回相同的错误代码。

Firebase Storage：操作的最大重试时间已超过，请再次尝试。

非常感谢您的帮助。

- Jonathan Stellwag

Answer 1

根据文档，您的第一个看起来是正确的。我相信您正在遇到错误，因此请连接错误回调：

storageRef.getDownloadURL().then(function(url) {
    console.log(url);
}, function(error){
    console.log(error);
});

请看：

参见：https://firebase.google.com/docs/reference/js/firebase.storage.Reference#getDownloadURL

- Mathew Berg

Answer 2

更新

我向Firebase支持团队报告了此问题，并得到以下回复：

我们的工程师回复说，这是一个Android特有的问题（在iOS上运行正常）[...] 我们目前正在解决这个问题，但暂时无法分享时间计划。

调查

看起来这是一个由react-native的XMLHttpRequest引起的实际错误。 当以与您描述相同的方式尝试getDownloadURL（）时，会发生相同的问题（即达到最大重试时间）。

但是，根据此堆栈溢出线程中所述，当覆盖react-native的XMLHttpRequest的polyfill时，getDownloadURL（）将正常完成并返回有效的URL。

我们正在使用react-native v0.33.0，Firebase v3.4.1

解决方法

与此同时，我们一直在使用这个解决方法来绕过Firebase API:

var bucket = firebase.storage().ref().bucket;
var firebaseUrl = "https://firebasestorage.googleapis.com/v0/b/" + bucket + "/o/";
var finalUrl = firebaseUrl + 'path%2Fto%2Fresource';
firebase.auth().currentUser.getToken()
.then((token) => {
  fetch(finalUrl, {headers: {'Authorization' : 'Firebase ' + token}})
  .then((response) => response.json())
  .then((responseJson) => {
    var downloadURL = finalUrl + "?alt=media&token=" + responseJson.downloadTokens})
  })
}); 

这似乎只影响少数用户，因为我只在其他地方看到了此问题被提出。然而，这似乎是一个实际的错误，在发生时非常严重，所以任何更多的信息都将不胜感激。

- Christian Barth Roligheten

---

感谢您提供详细的答案。目前我没有时间测试这个解决方案，但我找到了一个变通方法（直接获取图片的URL），不过我会尽快尝试。提前感谢您。敬礼，Jonathan - Jonathan Stellwag

对我没用：“ReferenceError: fetch未定义”。 - Guto Marrara Marzagao

我明白了。我只是使用Node.js 进行测试（而不是React Native）。 函数fetch是与React Native的依赖项一起加载的。 - Guto Marrara Marzagao

Answer 3

从存储中获取所有图像。

firebase.storage().ref().child('filename').list().then(result => {
    // Loop over each item
    result.items.forEach(pics => {
        firebase.storage().ref().child(pics.fullPath).getDownloadURL().then((url) => {
            console.log(url);
            //these url will be used to display images
         })
     });
})

- Nehal Shrivashtava