在本机反应中从 firebase 接收数据

Question

我将 React Native 与 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

Answer 1

您需要做的是使用组件状态并将您的值存储在那里，以便您可以在从 Firebase 收到后呈现它，请继续：

class locationScreen extends Component {
state = {
       username: ""
};

//... rest of your code

在上面，您已经使用空的用户名字符串值初始化了一个状态。更改您的 readUserData 函数以反映以下内容：

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

以上只是获取数据并使用 setState() 函数重新分配状态用户名值以反映从检索到的数据中获取的值。最后在您的渲染中，更改以下内容：

<Text style={styles.welcome}>{this.state.username}</Text>

这将呈现用户名的状态值，在您触发函数并检索数据后，状态将更改并反映在这里。

希望对您有所帮助！

Answer 2

我的数据库结构：

你可以试试：

var ref = firebase.database().ref(`${mValue}`)
ref
.limitToLast(20)
.on('child_added', snapshot => console.log(snapshot));

或

var ref = firebase.database().ref(`${mValue}`);
    ref.once("value")
    .then((snapshot) => {
        let Id = snapshot.child("ID").val()
        let Name = snapshot.child("name").val()
        let Avatar = snapshot.child("Avatar").val()
        let email = snapshot.child("email").val()

        let arr = this.state.arrUser
        arr.push({Id, Name, Avatar, email})
        this.setState({arrUser: arr})
    }).catch(err=> console.log(err));

link to refer

在本机反应中从 firebase 接收数据

Receive data from firebase in react native

reactjs

react-native

react-native-firebase