在 react native 中从 firebase 数据库中渲染/检索数据

Question

实时数据库的屏幕截图我已经使用set函数在数据库中创建了name和age。我想在 react native 中从 firebase 实时数据库中渲染和检索数据，而不是组件中的 Here 单词。我该如何实现？

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Image,Button,TouchableOpacity} from 'react-native';
//import  firebase from '@firebase/app';
//import '@firebase/auth';
//import '@firebase/database';
import firebase from 'firebase';    
 export default class App extends Component{  
 componentWillMount(){  
  var config = {
      apiKey: "**********",
      authDomain: "**********.firebaseapp.com",
      databaseURL: "https://********.firebaseio.com",
      projectId: "*******",
      storageBucket: "********.appspot.com",
      messagingSenderId: "*********"
    };
firebase.initializeApp(config);    
firebase.database().ref('users/001').set(  
{  
name:'noor adam',
age:45  
 }).then(()=>{console.log('inserted');}).catch((error)=> . 
 {console.log('error');}); 
}  
render(){ 
return(  
<View><Text>Here</Text></View>
   )  
 }  
}

我想从 firebase 数据库中检索名称和年龄，而不是渲染中的 Here 单词。

Answer 1

您可以使用 snapshot 获得实时数据值。此示例将快照放在 componentDidMount 中，在 componentWillMount 之后调用。

这有点伪，但由于您使用的是 React 类，因此我添加了一个构造函数。 它使this的使用是可预测的。

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, 
View,Image,Button,TouchableOpacity} from 'react-native';
//import  firebase from '@firebase/app';
//import '@firebase/auth';
//import '@firebase/database';
import firebase from 'firebase';    
 export default class App extends Component{  
  constructor(props) {
  super(props)
}
  componentWillMount(){  
  var config = {
  apiKey: "**********",
  authDomain: "**********.firebaseapp.com",
  databaseURL: "https://********.firebaseio.com",
  projectId: "*******",
  storageBucket: "********.appspot.com",
  messagingSenderId: "*********"
};
 firebase.initializeApp(config);    
 firebase.database().ref('users/001').set(  
  {  
  name:'noor adam',
  age:45  
 }).then(()=>{console.log('inserted');}).catch((error)=> . 
 {console.log('error')})
 .then(() => {
   firebase.database().ref('users/001').on('value', (snapshot) =>{
   this.setState({
  name: snapshot.val().name,
  age: snapshot.val().age
 })
})
}) 
}  
render(){ 
return(  
<View><Text>Here</Text></View>
 )  
 }  
}