2017-06-08 16 views
1

Firebase DBからデータを取得します。ここでReactNativeを使用してFirebaseデータを取得する

は、データの構造です:

words{ 
    word1{ 
     english:english 
     french: french 
    } 
    word2{ 
     english:english 
     french: french 
    } 
} 

私はListViewコントロールのフランスバージョンを表示したいです。

これまでのところ、私はこれがあります。

 // Initialize Firebase 
const firebaseConfig = { 
    apiKey: "AIzaSyDWedZY1svNHxPUi2ReQJTlCf9Q60407E8", 
    authDomain: "streetfrench-a84df.firebaseapp.com", 
    databaseURL: "https://streetfrench-a84df.firebaseio.com", 
    projectId: "streetfrench-a84df", 
    storageBucket: "streetfrench-a84df.appspot.com", 
    messagingSenderId: "551358813028" 
}; 
const firebaseApp = firebase.initializeApp(firebaseConfig); 

class FirebaseReactNativeSample extends 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({ 
      french: child.val().french, 
      english: child.val().english, 
      _key: child.key 
     }); 
     }); 

     this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(items) 
     }); 

    }); 
    } 

    componentDidMount() { 
    this.listenForItems(this.itemsRef); 
    } 

    render() { 
    return (
     <View style={styles.container}> 

     <StatusBar title="Dictionary" /> 

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


      </View> 
     ) 
     } 
    _renderItem(item) { 

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

} 

Expo.registerRootComponent(FirebaseReactNativeSample); 

をしかし、何もステータスバーを除いて表示されません。だから誰も私にこのエラーを修正するためのガイダンスを提供できますか?

+0

はい、 'items'を' words'に変更する必要があります – magneticz

+0

素晴らしい、うまくいきます、ありがとうございます! – Sonia

答えて

2

firebaseの参照パスを渡してデータを取得していません。 理想的には

firebaseApp.database().ref('/words/word1/')です。また、firebase dbコンソールのdbルールで設定したアクセス権を確認することも忘れないでください。

すべてのユーザーがデータにアクセスして編集できるようにするには、読み取りと書き込みのアクセス許可をtrueに設定する必要があります。

+0

ありがとうございます – Sonia

関連する問題