React Native Maps:自定义标记会导致极度滞后并在Android上放慢速度 [英] React Native Maps: Custom Markers cause extreme lag and slow down on android

问题描述

我在地图上最多加载了2000个标记. 在开始的几秒钟内，它工作正常，但随后急剧下降.要修复它，我需要清除应用程序数据，然后它只能工作几秒钟，然后像以前一样再次工作.

I load up to about 2000 markers on the map. It works fine for the first few seconds but then slows down sharply. To fix it I need to clear the app data, then it only works for a few seconds and again like before.

const mapMarkers = [
    {id: 1, code: "603778", lat: 35.761791, lng: 51.389438},
    {id: 2, code: "788621", lat: 35.712278, lng: 51.361785},
    {id: 3, code: "129667", lat: 35.674757, lng: 51.485328},
    {id: 4, code: "999646", lat: 35.772885, lng: 51.446735},
    {id: 5, code: "111524", lat: 35.755656, lng: 51.446774},
    //...
];

let markers = mapMarkers.map(marker => {
    return (<Marker
        key={marker.code}
        coordinate={{latitude: marker.lat, longitude: marker.lng}}
        image={require('./images/markers.png')}
        onPress={() => console.log("pressed")}
    />)
});

我在emulator和physical device上进行了测试，但都遇到了问题.

I tested on emulator and physical device and had problems with both.

提示:我将react-native-map-clustering软件包用于标记簇.

tip: I use react-native-map-clustering package for marker cluster.

推荐答案

我尝试了两种方法来提高性能

I tried two ways that would improve performance a bit

1. 将key更改为index(key={index})

mapMarkers.map((marker, index) => {
    return (<Marker
        key={index}
        ...
    />)
 });

禁用道具tracksViewChanges={false}或添加icon道具而不是image

disable props tracksViewChanges={false} or add icon props instead of image

mapMarkers.map((marker, index) => {
    return (<Marker
        key={index}
        tracksViewChanges={false}
        icon={require('./images/markers.png')}
        ...
    />)
});

这篇关于React Native Maps:自定义标记会导致极度滞后并在Android上放慢速度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！