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>

我是新来的反应本地人，我不确定我做错了什么。有什么建议吗？

指向完整档案的链接为https://codepen.io/yeni/pen/QgyWPZ

Answer 1

尝试使用＆＃34;标记＆＃34;在括号中：

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

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

React-Native AirBnb Maps无法渲染

2 个答案: