react-native-maps：如何在不重新渲染整個地圖的情況下添加標記？

Question

我正在構建一個顯示標記的地圖，以顯示附近商家的位置。 我將一個“數據”數組作為道具傳遞給地圖。 我設置了一個間隔，每兩秒，我從我的 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()函數來指定標記是否需要在某些條件下更新。