使用ListView响应本机Firebase

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

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

我创建了firebaseConfig和两个.js文件：

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

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;

import React，{Component}来自'React'；
从“react native”导入{AppRegistry、View、ListView、样式表、Text}；
从“./行”导入行；
从“firebase”导入*作为firebase；
const styles=StyleSheet.create({
容器：{
弹性：1，
玛金托普：20，
},
分离器：{
弹性：1，
高度：StyleSheet.hairlineWidth，
背景颜色：“#8E8E8E”，
},
});
//初始化Firebase
常量firebaseConfig={
apiKey:“xx”，
authDomain:“xx”，
数据库URL:“xx”，
storageBucket:“”，
};
const firebaseApp=firebase.initializeApp（firebaseConfig）；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
const ds=new ListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）；
此.state={
数据源：ds.cloneWithRows（['row1'，'row2']），
};
}
render（）{
返回(
}
RenderParator={（sectionId，rowId）=>}
/>
);
}
}
AppRegistry.registerComponent（'App'，（）=>App）；

Row.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);

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;

从“React”导入React；
从“react native”导入{视图、文本、样式表、图像}；
const styles=StyleSheet.create({
容器：{
弹性：1，
填充：12，
flexDirection:'行'，
对齐项目：“居中”，
},
正文：{
marginLeft:12，
尺寸：16，
},
});
常量行=（道具）=>(
“嘿”
);
导出默认行；

首先，您需要获取/查询firebase中的数据。这通常是在构造函数中完成的，或者

componentWillMount

lifecycle方法

大致如下：

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