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

我的数据库结构：

您可以尝试：

z-index

或

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

link to refer

Answer 2

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

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

//... rest of your code

上面，您已经使用空的用户名String值初始化了一个状态。更改您的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>

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

希望这会有所帮助！

在React Native中从Firebase接收数据

2 个答案: