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> 组件后，我无法在地图上进一步移动或缩放。关于如何将来自 Firebase 的标记整合到 AirBnb 上的任何想法 MapView.Markers?

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>

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

React-Native: How do I render a list of markers from firebase on Airbnb maps?

react-native

components

react-native-android

react-native-maps