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.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。试过log
sampleImage
:undefined
2.3。尝试log
theurl
:没有达到这一点
3.1。试图在<Image>
对象中使用sampleImage
作为source
:empty Image
3.2。试过log
sampleImage
: 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 的标记列表?
在 react-native 和 firebase 3.1 中登录 Facebook