Question

我是反应原生的初学者，目前我正在尝试从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>
    );
  }

如果我将return的{{1}}值设置为_renderItem，我可以呈现对象的特定属性。

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

标记根本不渲染。此外，在实现<Text> {marker.description} </Text>组件后，我无法进一步移动或缩放地图。有关如何在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>

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

1 个答案: