在世博会上渲染DB条目

Question

这是我第一次使用expo/react原生应用程序，遇到了麻烦，

我可以很好地console.log我的消防仓库数据库条目，但我似乎无法解决如何将它们渲染到视图中，以及如何制作位置卡，如所附图像，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>
);

希望这能有所帮助！