Реагируйте на собственные карты: пользовательские маркеры вызывают крайнюю задержку и замедление на android

Question

Я загружаю до 2000 маркеров на карту. Он отлично работает в течение первых нескольких секунд, но затем резко замедляется. Чтобы исправить это, мне нужно очистить данные приложения, затем оно работает только в течение нескольких секунд и снова, как раньше.

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 и у меня были проблемы с обоими.

Совет: я использую пакет react-native-map-clustering для кластера маркеров.

Answer 1

Я попробовал два способа, которые немного улучшили бы производительность

1. изменить key на index (key={index})

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

2. отключить реквизиты tracksViewChanges={false} или добавить icon реквизиты вместо image

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