javascript - React-Native AirBnb map 未渲染

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 原生新手，不确定我做错了什么。有什么建议吗？

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

Answer 1

您没有从 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 时。