从 firestore 文档中读取特定数据并将其作为文本组件放置

Question

我目前正在学习如何将 firestore 实施到 React Native Expo 项目中，我才刚刚开始。首先，我将特定数据更新到我的 firestore 中的文档，现在我正在将其读入日志控制台，即下面的代码。

但是，我只想读取文档的某个特定数据，例如“高度”，并将其放在下面的Text组件中。不幸的是，我的尝试没有成功。你能帮我一下吗？

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import * as firebase from 'firebase';
import 'firebase/firestore';

var firebaseConfig = {
  apiKey: "****",
  authDomain: "****",
  databaseURL: "****",
  projectId: "****",
  storageBucket: "****",
  messagingSenderId: "****",
  appId: "****"
};

//Initialize firebase
if (!firebase.apps.length) {
  //If app hasn't initialize, initialize app
    firebase.initializeApp(firebaseConfig);
} 

export default class App extends React.Component{

  componentDidMount() {
    var db = firebase.firestore();
    var docRef = db.collection("users");
    
  let getDoc = docRef.doc('Tiago').get()
    .then(doc => {console.log('Document data:', doc.data())});
}

  render(){
    return (
      <View style={styles.container}>
       <Text>I wish to place it here</Text>
      </View>
    );
  }
}

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
});

此外，我真的找不到关于如何将 firestore/firebase 实施到 react native + expo 项目中的完整文档。可以在下方留言link让我学习吗？

Answer 1

您将使用状态从 componentDidMount 获取值到 render 方法。

export default class App extends React.Component{

  componentDidMount() {
    var db = firebase.firestore();
    var docRef = db.collection("users");
    
    let getDoc = docRef.doc('Tiago').get().then(doc => {
      console.log('Document data:', doc.data())
      setState({ height: doc.data().height });
    });
  }

  render(){
    return (
      <View style={styles.container}>
       <Text>{this.state.height}</Text>
      </View>
    );
  }
}

另见：

state and lifecycle 上的 React 文档。

Answer 2

缺少 this. 渲染方法。

export default class App extends React.Component{

  componentDidMount() {
    var db = firebase.firestore();
    var docRef = db.collection("users");
    
    let getDoc = docRef.doc('Tiago').get().then(doc => {
      console.log('Document data:', doc.data())
      this.setState({ height: doc.data().height });
    });
  }

  render(){
    return (
      <View style={styles.container}>
       <Text>{this.state.height}</Text>
      </View>
    );
  }
}

从 firestore 文档中读取特定数据并将其作为文本组件放置

Reading a specific data from firestore document and placing it as a text component

javascript

firebase

react-native

google-cloud-firestore

react-native-firebase