React-Native AirBnb Maps not rendering

Question

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 .

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

Answer 1

尝试将“标记”放在括号中：

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

Answer 2

You're not returning anything from your map function to render. 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.