Рендеринг записи БД в Экспо

Question

Это мой первый go в собственном приложении expo / реагировать, и у меня возникла проблема,

Я могу console.log мои записи в БД Firestore нормально, но я не могу сработать как отобразить их в виде и сделать карты местоположения, такие как прикрепленное изображение, 1

Кто-нибудь может помочь?

import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";

import firebase from "firebase";
require("firebase/firestore");

const config = {

};

if (!firebase.apps.length) {
  firebase.initializeApp(config);
}

var db = firebase.firestore();

class componentName extends Component {

  componentDidMount() {
    db.collection("event")
      .get()
      .then((snapshot) => {
        snapshot.docs.forEach((doc) => {
          console.log(doc.data());


        });
      });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>d</Text>
      </View>
    );
  }
}
export default componentName;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

Answer 1

Для этого вам нужно создать состояние и включить записи БД в состояние, что-то вроде этого:

   constructor(props){
       super(props);
       this.state={
           data:[]
       }
   }

И установить записи БД, как это в данных состояния:

 componentDidMount() {
    db.collection("event")
      .get()
      .then((snapshot) => {
        this.setState({
        data : snapshot.docs
    })
  }

И в виду, вы можете сделать это так:

  return (
      <View style={styles.container}>
      {
        this.state.data.map((item,key) =>{
        return(
        <Text>{item.campusName}</Text>
        <Text>{item.campusAddress}</Text>
        <Text>{item.campusTimings}</Text>
          )
        })
      }
      </View>
    );

Надеюсь, это поможет!