Как преобразовать текстовый URL в изображение из Firebase Storage в React Native?

Question

Я создаю приложение в Expo, где я хотел бы иметь список ListItem, состоящий как из изображений, так и из текста, и они должны быть из комбинации Database + Storage. Мне удалось подключить базу данных Firebase к моему приложению, и я могу получить текст из БД (см. Код ниже), но мне не удается подключить URL-адрес из базы данных к хранилищу.

Пока что я могу распечатать URL (gs: // ...) из базы данных как текст, но я не могу преобразовать этот URL в изображение, которое должно прийти из хранилища.

Я также пытался получить информацию из этой ссылки , но я уничтожил весь код, поэтому я создал резервную копию. Может кто-нибудь помочь мне преобразовать ссылку 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 () где-то в коде, но я не знаю, где.