React Native - Firebase with ListView

Question

我想在React Native的Listview中显示来自Firebase的数据。

我成功显示“嘿”这样的静态数据，但我不知道如何显示Firebase数据。我的数据库是这样的：用户>电子邮件（例如为了显示电子邮件）。

我没有firebaseConfig和两个.js文件：

1. index.ios.js：

代码：

import React, { Component } from 'react'; 
import { AppRegistry, View, ListView, StyleSheet, Text } from 'react-native'; 
import Row from './Row'; 
import * as firebase from 'firebase'; 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    marginTop: 20, 
    }, 
    separator: { 
    flex: 1, 
    height: StyleSheet.hairlineWidth, 
    backgroundColor: '#8E8E8E', 
    }, 
}); 

// Initialize Firebase 
const firebaseConfig = { 
    apiKey: "xx", 
    authDomain: "xx", 
    databaseURL: "xx", 
    storageBucket: "<your-storage-bucket>", 
}; 
const firebaseApp = firebase.initializeApp(firebaseConfig); 

export default class App extends Component { 
    constructor(props) { 
    super(props); 

    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.state = { 
     dataSource: ds.cloneWithRows(['row 1', 'row 2']), 
    }; 
    } 

    render() { 
    return (
     <ListView 
     style={styles.container} 
     dataSource={this.state.dataSource} 
     renderRow={(data) => <Row {...data} />} 
     renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />} 
     /> 
    ); 
    } 
} 

AppRegistry.registerComponent('App',() => App); 

行.js：

代码：

import React from 'react'; 
import { View, Text, StyleSheet, Image } from 'react-native'; 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    padding: 12, 
    flexDirection: 'row', 
    alignItems: 'center', 
    }, 
    text: { 
    marginLeft: 12, 
    fontSize: 16, 
    }, 
}); 

const Row = (props) => (
    <View style={styles.container}> 
    <Text style={styles.text}> 
    "Hey" 
    </Text> 
    </View> 
); 

export default Row; 

Answer 1

首先，您需要为您的数据提取/查询firebase。这通常在构造函数或componentWillMount生命周期方法中完成。沿线的

东西：

firebaseApp.database().ref().child(`${<someUserPath>}/username`).once("value", (snapshot) => { 
    this.setState({ username: snapshot.val() }); 
    }); 

之后，你有你想要的数据，然后传下来的ListView道具这样的：

<ListView 
    dataSource={this.state.dataSource.cloneWithRows([this.state.username])} />