2017-02-03 11 views
0

私はこの作業を行うために数日間苦労してきました。 React NativeのListViewにFirebaseデータベースのデータを取り込みたいとします。私は、このセットアップを持っている:ReactNativeリストビューにFirebaseデータを設定する

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}/> 
     ); 
     } 

    } 

データ構造は次のようになります。 enter image description here

それでは、私がここでやろうとしているが、それぞれ「プロファイルの「forename」文字列とリストビューの各行を移入であります"ディレクトリ(0,1,2)。 しかし私のalert()では返されます:[object Object],[object Object],[object Object]これは、それらのディレクトリからの "forename"ストリングではなく、 "profiles_info"からのオブジェクトとしてディレクトリをフェッチするだけであることを意味する必要があります。

これは私が立ち往生している場所で、誰かがこれについていくつかの光を当てることができることを願っています。私は解決策が何であるべきかを知っている、私はちょうどコードでそれを適用する方法を知らない。

ありがとうございます!

答えて

1

あなたはここにあなたのプロフィールの配列にオブジェクトをプッシュしているので、それはあなたのアラートがオブジェクトを示している理にかなっていますフィールドがnameおよびkeyのオブジェクト。 profiles[0].nameにアクセスすると、実際の名前が得られます。

alertの代わりにconsole.logを使用すると、より意味のある情報が得られます。

+0

ありがとう、ジェフ、ついにそれを手に入れました。 – Benni

0

チュートリアルをお試しください。あなたを助けるかもしれません。あなたはalert(JSON.stringify(profiles));代わりalert(profiles);を使用する場合は、の配列が表示されるはずです

profiles.push({ 
    name: child.val().forename, 
    _key: child.key 
}); 

react-native-firebase-tutorial-list

+0

ありがとうございましたが、前に見ましたが、基本的にはチュートリアルと同じ方法を使用しています。私の質問は、正しいディレクトリを繰り返し処理し、各ディレクトリの特定のデータをListviewにフェッチする方法です。 – Benni

関連する問題