React-Native：如何在 Airbnb 地图上渲染来自 firebase 的标记列表？

Question

我是 react-native 的初学者，目前正在尝试从 firebase 数据库中获取标记并将它们渲染到我的地图上。我之前将标记定义为 markers: [] 并用虚拟对象（我从 firebase 数据库中检索到的完全相同的对象）填充了标记对象。

我在状态变量中定义了初始 markers 对象。

 markers: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      })

最后使用 react-native 中的 ListView 渲染它

<ListView
    dataSource={this.state.markers}
    renderRow={this._renderItem.bind(this)}
>
</ListView>

_renderItem 定义如下：

_renderItem(marker) {
    console.log(marker);
    return (
      <MapView.Marker
      coordinate={{longitude: marker.longitude, latitude: marker.latitude}}
      title={marker.description}
      description={marker.description}>
      <View style={styles.bikeRadius}>
             <View style={styles.bikeMarker}></View>
      </View>
      </MapView.Marker>
    );
  }

如果我将_renderItem 的return 值设置为<Text> {marker.description} </Text>，我可以渲染对象的特定属性。

您将在 CodePen 上找到完整代码：https://codepen.io/yeni/pen/BZjJYq

标记根本不渲染。此外，在实现<ListView> 组件后，我无法在地图上进一步移动或缩放。任何想法如何在 AirBnb MapView.Markers 上合并来自 Firebase 的标记？

Answer 1

您不需要 ListView，您可以简单地映射到 MapView 内的标记：

<MapView>
  {this.state.markers.map(marker => (
    <MapView.Marker
      coordinate={{longitude: marker.longitude, latitude: marker.latitude}}
      title={marker.description}
      description={marker.description}>
      <View style={styles.bikeRadius}>
        <View style={styles.bikeMarker}></View>
      </View>
    </MapView.Marker>
  )}
<MapView>