从firebase中以本机方式接收数据

Question

我是本机反应的新手，并尝试完成一些简单的应用程序。我将它与firebase连接起来，可以在数据库中创建一个项目，并在控制台日志中接收它，但不在屏幕上。我认为运行该功能并完成所有操作会有些延迟。

目前，我创建了一个函数，该函数正在读取数据库中的项目，并且只有在单击按钮时才会被触发。在控制台日志中，我得到了正确的数据，但是我无法将其存储到变量中并在屏幕上显示出来，当我尝试使用此功能进行操作时，屏幕保持空白。

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image, Button, ScrollView} from 'react-native';
import firebase from 'react-native-firebase';

 let username;
class locationScreen extends Component {

  onTestClick = ()=>{
   const dbRef = firebase.database().ref("testdata")
    dbRef.set("hello worlf from app")
  }

  readUserData =() => {
    console.log('test oke');
    firebase.database().ref('/Users/1').on('value', function (snapshot) {
        test = snapshot.val();
        this.username = test.Gebruikersnaam;
        console.log(this.username);
    });
}

  render() {
      return (
        <ScrollView>

        <View style={styles.container}>
          <View>
            <Text style={styles.welcome}>{this.username}</Text>
            <Button title={"Create test record"} onPress={this.readUserData}></Button>
          </View>
        </View>
      </ScrollView>
      );
    }
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    },
    welcome: {
      marginTop: 300,
    },
    instructions: {
      textAlign: 'center',
      color: '#333333',
      marginBottom: 15,
    },
    button: {

    }
  });

  export default locationScreen;
我应该实现的是，当我到达此屏幕'locationScreen'时，无需按任何按钮即可加载Firebase中的数据并在屏幕上可见。我认为这是一个非常简单的问题，但我可以解决。.目前，我正在使用react-native 0.59.2和react-native-firebase 5.5.6]

我是本机反应的新手，并尝试完成一些简单的应用程序。我将它与firebase连接起来，可以在数据库中创建一个项目，并在控制台日志中接收它，但不在屏幕上。我认为有...

Answer 1

您需要做的是使用组件状态并将值存储在此处，以便一旦从Firebase收到后就可以呈现它，请遵循：