Question

我正在尝试从我的反应本机应用程序中的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>
      }
      />
    );
  }
}

React Native Firebase设置

1 个答案: