在本机应用程序中从 firebase 检索数据

Question

我是 React Native 的新手。我想显示从 firebase 数据库应用程序屏幕上获取的文本作为文本。我尝试在控制台上打印并发出警报，它显示成功但未显示在应用程序屏幕上。firebase data console print alert box

import React,{Component} from 'react';
import { View, Text,} from 'react-native';
import * as firebase from 'firebase';


export default class ListItem extends Component {


  state= {
      items: []
   }


    componentWillMount(){
        var firebaseConfig = {
          apiKey: "***",
          authDomain: "***",
          databaseURL: "***",
          projectId: "***",
          storageBucket: "***",
          messagingSenderId: "***",
          appId: "***",
          measurementId: "***"
        };


        firebase.initializeApp(firebaseConfig);

        var ref = firebase.database().ref('/14/info');

        ref.on("value", function(snapshot) {

        const userItem = snapshot.val();
        let items = Object.values(userItem);


        });
      }

render() {
        return (
            <View style= {{justifyContent: 'center'}}>

             <Text>{this.state.items}</Text> 
            </View>
        )
    }
}

Answer 1

数据是从 Firebase（以及几乎所有现代网络 API）异步加载的，因为可能需要一些时间才能获得结果。这意味着当您的应用程序呈现时，数据尚不可用。出于这个原因，您需要告诉 React 在数据可用时重新渲染，您可以通过调用 setState().

来完成

let self = this;
ref.on("value", function(snapshot) {
    const userItem = snapshot.val();
    let items = Object.values(userItem);
    self.setState({ items: items });
});

或者，您可以使用粗箭头表示法，使这更简单一些：

ref.on("value", (snapshot) => {
    const userItem = snapshot.val();
    let items = Object.values(userItem);
    this.setState({ items: items });
});

我高度建议在继续之前阅读如何管理state in a React application，因为这种行为对于高效构建 React 应用程序非常重要。

在本机应用程序中从 firebase 检索数据

Retrieve data from firebase in react native app

javascript

firebase

react-native

firebase-realtime-database

react-native-android