如何在React Native中将文本URL从Firebase存储转换为图像？

Question

我正在Expo中构建一个应用程序，我想拥有一个包含图像和文本的ListItem列表，它们应该来自Database + Storage的组合。 我已经设法将Firebase数据库连接到我的应用程序，并且可以从数据库检索文本（请参见下面的代码），但是我无法将URL从数据库连接到存储。

到目前为止，我可以将数据库中的URL（gs：// ...）打印为“文本”，但是我无法将该URL转换为应该来自Storage的图像。

我也尝试过通过此链接跟踪信息，但是我销毁了整个代码，因此我进行了备份。 谁能帮我从存储将URL链接转换为图像？

我的数据库如下所示：

从数据库中检索文本的代码在这里：

 'use strict'; import React from 'react'; import { ListView, StyleSheet, Text, View, TouchableHighlight, AlertIOS, } from 'react-native'; import { Constants } from 'expo'; import firebase from 'firebase'; // 4.10.1 const StatusBar = require('../Firebase/StatusBar'); const ActionButton = require('../Firebase/ActionButton'); const ListItem = require('../Firebase/ListItem'); const styles = require('../Firebase/styles.js') // Initialize Firebase const firebaseConfig = { apiKey: "AIzxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", authDomain: "checkup-7b62e.firebaseapp.com", databaseURL: "https://checkup-7b62e.firebaseio.com", projectId: "checkup-7b62e", storageBucket: "checkup-7b62e.appspot.com", messagingSenderId: "00000000000" }; const firebaseApp = firebase.initializeApp(firebaseConfig); export default class FirebaseReactNativeSample extends React.Component { constructor(props) { super(props); this.state = { dataSource: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }) }; this.itemsRef = this.getRef().child('items'); } getRef() { return firebaseApp.database().ref(); } listenForItems(itemsRef) { itemsRef.on('value', (snap) => { // get children as an array var items = []; snap.forEach((child) => { items.push({ title: child.val().title, subtitle: child.val().subtitle, data: child.val().data, luna: child.val().luna, ora: child.val().ora, minutele: child.val().minutele, url: child.val().url, _key: child.key }); }); this.setState({ dataSource: this.state.dataSource.cloneWithRows(items) }); }); } componentDidMount() { this.listenForItems(this.itemsRef); } render() { return ( < View style = { styles.container } > < StatusBar title = "Events" / > < ListView dataSource = { this.state.dataSource } renderRow = { this._renderItem.bind(this) } enableEmptySections = { true } style = { styles.listview } /> < ActionButton onPress = { this._addItem.bind(this) } title = "Add" / > < /View> ) } _addItem() { AlertIOS.prompt( 'Add New Item', null, [{ text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel' }, { text: 'Add', onPress: (text) => { this.itemsRef.push({ title: text }) } }, ], 'plain-text' ); } _renderItem(item) { const onPress = () => { AlertIOS.alert( 'Complete', null, [{ text: 'Complete', onPress: (text) => this.itemsRef.child(item._key).remove() }, { text: 'Cancel', onPress: (text) => console.log('Cancelled') } ] ); }; return ( < ListItem item = { item } onPress = { onPress } /> ); } } //AppRegistry.registerComponent('FirebaseReactNativeSample', () => FirebaseReactNativeSample); 

ListView.js文件在这里：

 import React, { Component } from 'react'; import ReactNative from 'react-native'; const styles = require('./styles.js') const { View, TouchableHighlight, Text, Image } = ReactNative; export default class ListItem extends Component { render() { return ( //<TouchableHighlight onPress={this.props.onPress}> < View style = { styles.li_row } > < View style = { styles.li_column } > < Text style = { { fontWeight: 'bold', fontWeight: 'bold', textAlign: 'center', fontSize: 40 } } > { this.props.item.data } < /Text> < Text style = { styles.liText } > { this.props.item.luna } < /Text> < Text style = { styles.liText } > -- -- -- -- -- -- < /Text> < View style = { styles.li_row } > < Text style = { styles.liText } > { this.props.item.ora } < /Text> < Text style = { styles.liText } >: < /Text> < Text style = { styles.liText } > { this.props.item.minutele } < /Text> < /View> < Text style = { styles.liText } > { this.props.item.url } < /Text> < /View> < View style = { styles.li_column } > < Text style = { styles.liText } > { this.props.item.title } < /Text> < Text style = { styles.liText } > { this.props.item.subtitle } < /Text> < /View> < /View> //</TouchableHighlight> ); } } module.exports = ListItem; 

我试图将URL直接添加到uri中：

 < Image source = { { uri: this.props.url } } style = { { height: 200 } } /> 

但是我得到：

无法添加没有YogaNode的孩子。

因此，我假设我需要在代码中的某个地方包含firebase.storage（），但是我不知道在哪里。