Рендеринг / извлечение данных из базы данных Firebase в реагировать родной - PullRequest
Новая
       5

Рендеринг / извлечение данных из базы данных Firebase в реагировать родной

0 голосов
/ 02 февраля 2019

снимок экрана базы данных в реальном времени Я создал name и age в базе данных, уже используя функцию set.Я хочу визуализировать и получать данные из базы данных Firebase в реальном времени в реагировать родной вместо слова здесь в компонентах.Как мне этого добиться? 

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

Вместо слова Here в рендере я хочу получить имя и возраст из базы данных Firebase.

1 Ответ

0 голосов
/ 02 февраля 2019

Вы получаете значение данных в реальном времени с 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>
 )  
 }  
}
...