用Firebase数据填充ReactNative ListView

用Firebase数据填充ReactNative ListView,firebase,react-native,firebase-realtime-database,Firebase,React Native,Firebase Realtime Database,我已经挣扎了几天来让它工作。我想用Firebase数据库中的数据填充React Native中的ListView。我有以下设置: const ListItem = require('./profileRow'); var database = firebase.database(); var userId, dataKey; class Selection extends Component { constructor(props) { super

我已经挣扎了几天来让它工作。我想用Firebase数据库中的数据填充React Native中的ListView。我有以下设置:

const ListItem = require('./profileRow');

var database = firebase.database();
var userId, dataKey;



    class Selection extends Component {


      constructor(props) {
        super(props);

        userId = firebase.auth().currentUser.uid;

        this.dataRef = firebase.database().ref('/users/' + userId + '/profiles_info');

          this.state = {
            dataSource: new ListView.DataSource({
              rowHasChanged: (row1, row2) => row1 !== row2,
            })
          };

      }

      listenForProfiles(dataRef){
        dataRef.on('value', (snap) => {

          var profiles = [];
          snap.forEach((child) => {
            profiles.push({
              name: child.val().forename,
              _key: child.key
            });
          });
          alert(profiles);
          this.setState({
            dataSource: this.state.dataSource.cloneWithRows(profiles)
          });
        });
      }

      componentDidMount() {
        this.listenForProfiles(this.dataRef);
      }

      render() {


          return (
            <Image source={require('../assets/bg.png')} style={styles.container}>

            <View style={{flex: 1, flexDirection:'column'}}>
            <Text>
              Select a profile to view:
            </Text>

            </View>

            <View style={{flex: 1}}>

            <ListView dataSource={this.state.dataSource} renderRow={this._renderItem.bind(this)} enableEmptySections={true} style={styles.listview}> </ListView>

            </View>

            </Image>
          );

      }

      _renderItem(item) {
        return (
          <ListItem item={item}/>
        );
      }

    }
数据结构如下所示:

所以我在这里要做的是用每个概要文件目录0,1,2的名字字符串填充ListView的每一行。 但在我发出警报时,我被返回:[object object]、[object object]、[object object object],这意味着它只能从profiles\u info中获取作为对象的目录,而不是从这些目录中获取每个名字字符串

这就是我被困的地方,我希望有人能解释一下。我知道解决方案应该是什么,只是不知道如何在代码中应用它


提前谢谢

试试下面的教程。可能对你有帮助


您正在将对象推送到您的配置文件阵列中,因此您的警报显示对象是有意义的:

profiles.push({
    name: child.val().forename,
    _key: child.key
});
如果您使用alertJSON.stringifyprofiles;而不是个人资料;您应该看到一个包含字段name和key的对象数组。访问配置文件[0]。名称将给出实际名称


请注意,如果您使用而不是警报,您将获得一些更有意义的信息。

谢谢,但我之前已经看过了,我基本上使用了与该教程演示的相同的方法。我的问题更多的是关于如何遍历正确的目录,并将每个目录中的特定数据提取到我的Listview中。谢谢Jeff,终于开始了。