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

Posted 2023-02-23

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

【英文标题】：React-Native: How do I render a list of markers from firebase on Airbnb maps?

【发布时间】：2017-11-11 14:11:45

【问题描述】：

我是 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 的标记？

【参考方案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>

【讨论】：

非常感谢您的快速回答！ :) 不幸的是，当我尝试这个函数时，它说“this.state.markers.map”不是一个函数。我认为这是因为我有一个 ListView 对象？

完全。你必须有一个数组。

所以，我可以成功地让标记消失，但是当我更改代码中的条件属性时，它不会重新出现。知道可能出了什么问题吗？如果你有兴趣，我加了 50 赏金 :) ***.com/questions/44699115/…