react-native-maps:如何在不重新渲染整个地图的情况下添加标记？

Question

我正在构建一个显示标记的地图,以显示附近商家的位置.我将'data'数组作为道具传递给地图.我设置了一个间隔,每隔两秒,我从我的API中获取更多商家,并且'数据'数组增长.

我正在获取componentWillReceiveProps中的数据.fetchData()将更多商家附加到数据阵列.

componentWillReceiveProps(nextProps) {
    if(nextProps.loading == false) {
        setTimeout(nextProps.fetchData,2000);
    }

在我的MapView组件中 -

{
    this.props.data.length > 0 && this.props.data.map(merchant => (
        <MapView.Marker
            coordinate={{latitude: Number(merchant.latitude), longitude: Number(merchant.longitude)}}
            title={merchant.name}
            description={merchant.address}
            identifier={"" + merchant.id}
            key={merchant.id}
        />
    ))
}

我的问题:每当我调用fetchData()时,都会呈现新的标记.但是,整个地图再次渲染.我不想要这种眨眼的行为.

我会非常感谢任何帮助/建议.提前致谢!

PS你可以在这里找到视觉

Answer 1

您可以使用自定义类组件代替MapView.marker，然后使用该componentShouldUpdate()函数来指定标记在某些条件下是否需要更新。