React Native - 带有 ListView 的 Firebase答案

【问题标题】：React Native - Firebase with ListViewReact Native - 带有 ListView 的 Firebase
【发布时间】：2017-06-24 15:55:56
【问题描述】：

我想在 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);

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

【问题讨论】：

标签： listview typescript firebase react-native firebase-realtime-database

【解决方案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])} />

【讨论】：