React-Native：从 Firebase 存储下载图像答案

【问题标题】：React-Native: Download Image from Firebase StorageReact-Native：从 Firebase 存储下载图像
【发布时间】：2017-01-16 01:10:25
【问题描述】：

预告：

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

反应原生：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();

代码信息：

代码没有到达console.log(url)点

2.1。尝试在<Image> 对象中使用sampleImage 作为source：empty Image

2.2。试过logsampleImage：undefined

2.3。尝试logtheurl：没有达到这一点

3.1。试图在<Image> 对象中使用sampleImage 作为source：empty Image

3.2。试过logsampleImage：{ F: 0, ka: undefined, o: { F: 0, ... } }

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

Firebase 存储：超出操作的最大重试时间，请尝试再次。

非常感谢您的帮助。

【问题讨论】：

标签： javascript image firebase react-native firebase-storage

【解决方案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

【讨论】：

【解决方案2】：

更新

我将此问题报告给 Firebase 支持，并得到以下回复：

我们的工程师回来了，这似乎是一个特定于 Android 的问题（适用于 iOS）[..]我们目前正在解决这个问题，但至于时间线，我们目前无法分享任何内容

研究

这似乎是由 react-native 的 XMLHttpRequest 引起的实际错误。当以您描述的相同方式尝试 getDownloadURL() 时，会发生同样的事情（即达到最大重试时间）。

但是，当按照this stack overflow thread 中的描述覆盖 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})
  })
});

这是一个似乎会影响少量用户的问题，因为我只看到了here 提出的问题。然而，这似乎是一个实际的错误，并且当它发生时非常令人衰弱，因此非常感谢任何更多的输入。

【讨论】：

感谢您的详细解答。目前我没有时间测试这个解决方案，我找到了一个解决方法（获取图片的直接 URL），但我会尽快尝试。先感谢您。 BR乔纳森
对我不起作用：“ReferenceError: fetch is not defined”。
我明白了。我仅使用 node.js 进行测试（不响应本机）。函数 fetch 正在加载 react native 的依赖项。

【解决方案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
         })
     });
})

【讨论】：