2017-06-08 81 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數據庫控制檯中的數據庫規則中設置的權限。

如果您希望所有用戶都可以訪問和編輯數據,則必須將讀寫權限設置爲true

+0

謝謝你現在的作品 – Sonia