在 React Native 中从 Firebase 数据库/存储加载并返回图像

Question

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

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

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

所以在我的renderRow(responseItem) 函数中，我有以下内容：

<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}}/>
        )

    })

}

问题是，没有返回任何东西。

如果我在getImage 中的return 上方运行console.log(url)，它会记录正确的URL，我可以在浏览器中打开。

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

Answer 1

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

<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 />