React Native Firebase 设置

Question

我正在尝试在我的 react 本机应用程序中从我的 firebase 数据库中获取数据。

我已正确设置（据我所知），但是当应用程序呈现时，我看不到任何数据。

我有一个组件 FirebaseList.js

const firebaseConfig = {
  **Details**
};
firebase.initializeApp(firebaseConfig);

const data = [];

class FirebaseList extends Component {
  constructor(props) {
    super(props);

    this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });

    this.state = {
      listViewData: data,
    };
  }

  render() {
    return (
      <List
      dataSource={this.ds.cloneWithRows(this.state.listViewData)}
      renderRow={data =>
        <ListItem>
          <Text>{data}</Text>
        </ListItem>
      }
      />
    );
  }
}

我在别处调用此组件 - 我的导出设置正确，我的导入也是如此。

提前致谢。

Answer 1

您应该在 componentDidMount() 中从 firebase 获取数据！

import firebase from 'firebase';
class FirebaseList extends Component {
  constructor(props) {
    super(props);

    this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });

    this.state = {
      listViewData: [],
    };
  }
  componentWillMount() {
    const firebaseConfig = {
    **Details**
    };
    firebase.initializeApp(firebaseConfig);
  }
  
  componentDidMount() {
    firebase.database().ref('/path/datas/').once('value', snapshot => {
      const dataArray = [];
      const yourDatas = snapshot.val();
      for(let data in yourDatas){
        dataArray.push(data)
      }
      this.setState({ listViewData: dataArray });
    })
  }

  render() {
    return (
      <List
      dataSource={this.ds.cloneWithRows(this.state.listViewData)}
      renderRow={data =>
        <ListItem>
          <Text>{data}</Text>
        </ListItem>
      }
      />
    );
  }
}