我能够从Firebase
返回有关标记的所有数据,并将它们存储在array
中。
但是我在渲染它们时遇到了麻烦,它不会给我任何错误,但是标记不会显示。
我可以放入一个硬编码的标记,但是无法从数据库中获取所有标记。
这是我从firebase
返回的内容
Object {
"address": "",
"coordinate": Object {
"latitude": 30.448975180780916,
"longitude": -91.06502489274193,
},
"description": "lol",
"image": "somelink",
"timestamp": 1585608644837,
"uid": "06qPxLgyzkeTXExqycsGbJnhuNi2",
}
import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import MapView, { Marker } from "react-native-maps";
import * as Location from "expo-location";
import * as Permissions from "expo-permissions";
import * as firebase from "firebase";
class HomeScreen extends Component {
constructor(props) {
super(props);
this.state = {
region: null,
markers: []
};
this._getLocationAsync();
}
componentDidMount() {
const firestore = firebase.firestore();
firestore
.collection("post")
.get()
.then(snapshot => {
snapshot.docs.forEach(doc => {
this.state.markers = doc.data();
});
});
}
_getLocationAsync = async () => {
let { status } = await Permissions.askAsync(Permissions.LOCATION);
if (status !== "granted") console.log("Permission denied");
let location = await Location.getCurrentPositionAsync({
enabledHighAccuracy: true
});
let region = {
latitude: location.coords.latitude,
longitude: location.coords.longitude,
latitudeDelta: 0.045,
longitudeDelta: 0.045
};
this.setState({ region: region });
};
render() {
return (
<View style={styles.container}>
<MapView
style={{ flex: 1 }}
region={this.state.region}
showsUserLocation={true}
>
{/* <MapView.Marker
coordinate={{
latitude: 30.5044,
longitude: -90.4612
}}
title={"Road damaged"}
description={"description"}
/> */}
{this.state.markers.map((marker, index) => {
return (
<MapView.Marker
key={index}
coordinate={{
latitude: marker.coordinate.latitude,
longitude: marker.coordinate.longitude
}}
title={"Road damaged"}
description={"description"}
></MapView.Marker>
);
})}
</MapView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
}
});
export default HomeScreen;