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

Question

我正在构建一个显示标记的 map ，以显示附近商家的位置。我将一个“数据”数组作为 Prop 传递给 map 。我设置了一个间隔，每两秒，我从我的 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() 时，都会呈现新的标记。然而，整个 map 再次被渲染。我不想要这种眨眼的行为。

我将非常感谢任何形式的帮助/建议。提前致谢!

附:您可以找到视觉 here

Answer 1

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