从React Native中的Firebase数据库/存储加载并返回图像 [英] Load and return an image from Firebase database/storage in React Native

问题描述

我有一个Firebase应用程序设置，其中包含实时数据库中的一系列项目。每个项目都有一个 imagePath 节点，其中包含Firebase存储URI（例如gs：//bucket/images/stars.jpg）。

I've got a Firebase app setup, with an array of items in the Realtime Database. Each item has an imagePath node, containing a Firebase Storage URI (eg. gs://bucket/images/stars.jpg).

项目数组用于< ListView /> ，我需要在每一行中加载图片。

The array of items is used in a <ListView/>, and I need to load an image in each row.

由于图像不是直接以普通URL格式存储，我需要使用存储API来获取它。

Seen as the images aren't stored directly in a "plain" URL format, I need to use the storage API to get that.

所以在我的 renderRow（responseItem）函数中，我得到以下内容：

So in my renderRow(responseItem) function, I've got the following:

<View style={styles.imgWrap}>
    {this.getImage(responseItem.imgPath)}
</View>

该功能如下：

getImage(path) {
    FirebaseApp.storage().refFromURL(path).getDownloadURL().then((url) => {

        return (
            <Image
                style={styles.candidateImg}
                source={{uri: url}}/>
        )

    })

}

问题是，没有返回任何内容。

The problem is, nothing's being returned.

如果我在返回 console.log（url） c>在 getImage 中，它记录了我可以在浏览器中打开的正确URL。

If I run a console.log(url) above the return in getImage, it logs the correct URL, that I can open in browser.

Tldr; storage API正确获取图像URL，但react-native不返回< Image /> 组件。

Tldr; storage API is getting image URL correctly, but react-native isn't returning the <Image/> component.

推荐答案

我认为问题在于异步调用 getImage（），试试这个：

I think the problem is in async invoking of getImage(), try this:

<View style={styles.imgWrap}>
    <Image
        style={styles.candidateImg}
        source={this.state.img}/>
</View>


getImage(path) {
    FirebaseApp.storage().refFromURL(path).getDownloadURL().then((url) => {
        this.setState({img: {uri: url}});
    })
}

// and invoke in renderRow
this.getImage(responseItem.imgPath)

当然你应该创建一个uri数组来处理< ListView />

Of course you should create an array of uri's to handle <ListView />

这篇关于从React Native中的Firebase数据库/存储加载并返回图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！