Question

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

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

由于图像不是直接以“普通”URL格式存储，我需要使用存储API来实现这一点。

所以在我的imagePath函数中，我得到了以下内容：

<ListView/>

该功能如下：

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}}/> ) }) }上方console.log(url)，则会记录正确的网址，我可以在浏览器中打开。

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

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

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

1 个答案: