[英]React-Native AirBnb Maps not rendering
So within the constructor, I define a state 所以在构造函数中,我定义了一个状态
this.state = {
markers: [{
title: "Bike1",
description: "Bike1",
latitude: 38.232,
longitude: -121.3312186
},
{
title: "Bike2",
description: "Bike2",
latitude: 39.532,
longitude: -123.5312186
}]
}
Later on, I call the function to map all markers to actual MapView.Markers
. 稍后,我调用将所有标记映射到实际
MapView.Markers
。
This looks as follows: 如下所示:
{this.state.markers.map( marker => {
console.log(JSON.stringify(marker));
<MapView.Marker
coordinate={{longitude: marker.longitude, latitude: marker.latitude}}
title={marker.title}
description={marker.description}
>
<View style={styles.bikeRadius}>
<View style={styles.bikeMarker}></View>
</View>
</MapView.Marker>
})}
However, this works when I call a single marker. 但是,当我调用单个标记时,此方法有效。
<MapView.Marker coordinate={{latitude: this.state.gpsPosition.latitude, longitude: this.state.gpsPosition.longitude}}>
<View style={styles.radius}>
<View style={styles.marker}></View>
</View>
</MapView.Marker>
I am new to react-native and am not sure what I am doing wrong. 我是本机反应的新手,不确定自己在做什么错。 Any suggestions?
有什么建议么?
The link to the full file is https://codepen.io/yeni/pen/QgyWPZ 完整文件的链接为https://codepen.io/yeni/pen/QgyWPZ
尝试将“标记”放在括号中:
{this.state.markers.map( (marker) => {...
You're not returning anything from your map
function to render. 您不会从
map
函数返回任何内容以进行渲染。 Quick fix would be to do something like this: 快速解决方法是执行以下操作:
{this.state.markers.map( (marker, index) => {
console.log(JSON.stringify(marker));
return (
<MapView.Marker
key={index}
coordinate={{longitude: marker.longitude, latitude: marker.latitude}}
title={marker.title}
description={marker.description}
>
<View style={styles.bikeRadius}>
<View style={styles.bikeMarker}></View>
</View>
</MapView.Marker>
)
})}
I've also included a simple way to add a key
using index
from the map
function as you will get a warning about that when using map
in this manner. 我还提供了一种使用
map
函数中的index
添加key
的简单方法,因为当您以这种方式使用map
时,您会收到有关此警告。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.