React-Native AirBnb 地图未呈现答案

【问题标题】：React-Native AirBnb Maps not renderingReact-Native AirBnb 地图未呈现
【发布时间】：2017-11-10 17:00:24
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript react-native react-native-maps react-native-listview

【解决方案1】：

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

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

【讨论】：

否则，需要查看您的整个代码才能弄清楚发生了什么。
不幸的是，这并没有帮助，但我非常感谢您的回答！ :) 为了不把帖子弄得乱七八糟，我编辑了一个带有 CodePen 链接的帖子
我会稍微看看！感谢发布链接。

【解决方案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 时会收到警告。

【讨论】：