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

Posted

技术标签:

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

预告:

我仍然打开了一个 Firebase 项目,并且我仍在成功地使用 Firebase 数据库(所以firebase.initializeApp(config)有效)。 我在 Firebase 存储的文件夹“/Images/”中上传了几张图片,并将它们命名为 image1.jpgimage2.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 作为sourceempty Image

    2.2。试过logsampleImageundefined

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

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

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

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

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

非常感谢您的帮助。

【问题讨论】:

【参考方案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
         )
     );
)

【讨论】:

以上是关于React-Native:从 Firebase 存储下载图像的主要内容,如果未能解决你的问题,请参考以下文章

React-Native:如何在 Airbnb 地图上渲染来自 firebase 的标记列表?

解析 Firebase 模块(React-Native)

Firebase 和 react-native 集成

在 react-native 和 firebase 3.1 中登录 Facebook

在 React-Native 中的非异步函数中调用异步函数 - Firebase

react-native ios项目中的Firebase身份验证问题