React-Native AirBnb 地图不呈现

Question

所以在构造函数中，我定义了一个状态

this.state = {
  markers: [{
            title: "Bike1",
            description: "Bike1",
            latitude: 38.232,
            longitude: -121.3312186
          },
          {
            title: "Bike2",
            description: "Bike2",
            latitude: 39.532,
            longitude: -123.5312186
          }]
}

稍后，我调用函数将所有标记映射到实际 MapView.Markers。

看起来如下：

{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>
        })}

但是，这在我调用单个标记时有效。

<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>

我是 react-native 的新手，不确定我做错了什么。有什么建议吗？

完整文件的link是https://codepen.io/yeni/pen/QgyWPZ

Answer 1

尝试将 "marker" 放在括号中：

{this.state.markers.map( (marker) => {...

Answer 2

您没有从 map 函数返回任何内容进行渲染。快速修复是做这样的事情：

{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>
  )
})}

我还提供了一种使用 map 函数中的 index 添加 key 的简单方法，因为在使用 map 时您会收到警告以这种方式。

React-Native AirBnb 地图不呈现

React-Native AirBnb Maps not rendering

javascript

react-native

react-native-maps

react-native-listview