Question

the screenshot of the realtime database我创建name和age在已经在使用set函数的数据库。我想在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数据库中检索名称和年龄，而不是渲染中的“这里”一词。

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>
 )  
 }  
}

渲染/从火力数据库中检索数据在本地做出反应

1 个答案: