1

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

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

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

最后使用ListViewreact-native渲染它

<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值设置_renderItem为，我可以渲染对象的特定属性<Text> {marker.description} </Text>。

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

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

4

1 回答 1

4

您不需要 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>
于 2017-06-09T14:14:23.593 回答