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

Question

我正在构建一个地图，显示附近商家的位置标记。我通过props将“data”数组传递给地图。我设置了一个间隔，每两秒从我的API中获取更多商家，并且“data”数组会增长。

我在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()函数时，新的标记都会被渲染出来。然而整个地图也会重新渲染，我不想出现这种闪烁的行为。

非常感谢任何形式的帮助和建议。提前致谢！

附注：你可以在这里找到可视化演示。

- Neal Karpe

---

why-did-you-update 可能会提示您为什么组件已更新并重新渲染。 - coockoo

React组件有一个生命周期事件shouldComponentUpdate，您可以在其中控制组件何时更新。 - coockoo

如果我们能看到fetchData和周围带有props的<MapView>标签，那么我可能会提供帮助。 - ReyHaynes

我也需要帮助解决这个问题。 - l0veisreal

你找到解决方案了吗，@Neal Karpe？ - Syed Amir Ali

Answer 1

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

- Lee Davis