使用React Native和Firebase中的FlatList渲染列表项

Question

非常新的反应原生。我不确定如何将数据传递到Flatlist以及如何呈现它。我将来自firebase数据库的Restaurants数组传递给this.restaurantRef。 listenForRestaurants在首次渲染时被调用，以将所有引用的项目推送到名为restaurants的数组中。不太确定我应该如何设置从firebase数据库呈现餐馆列表的逻辑。

import React from 'react'
import {Component} from 'react'
import {
ScrollView,
Text,
FlatList,

} from 'react-native'
import firebase from '../firebase'
import ListItem from './ListItem'


export default class Location extends Component {

 constructor(props){
 super(props)
  this.restaurantRef = firebase.database().ref().
                      child('Restaurants')
  }


 listenForRestaurants(restaurantRef) {
  restaurantRef.on('value', (snapshot) => {
   var restaurants = [];
   snapshot.forEach((child) => {
    restaurants.push({
     name: child.val().name,
      _key: child.val().key
    })
   })
  })
}
componentDidMount(){
 this.listenForRestaurants(this.restaurantRef)
}

_renderItem(item){
 return(
  <ListItem item={item} onPress={() => {}} />
 )
}
render(){
 return(
  <ScrollView>
   <FlatList
    data={this.restaurantRef}
    renderItem={this._renderItem}
   />
  </ScrollView>
 )
 }
}

//This the ListItem component
import React, {Component} from 'react'
import {
  View,
  TouchableHighlight,
  Text,
} from 'react-native';


export default class ListItem extends Component {
 render() {
  return (
   <TouchableHighlight onPress={this.props.onPress}>
    <View>
     <Text>{this.props.item.name}</Text>
    </View>
   </TouchableHighlight>
  );
 }
}