React Native Maps: Custom Markers cause extreme lag and slow down on android

问题

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")}
    />)
});

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

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

回答1:

I tried two ways that would improve performance a bit

1. change key to index (key={index})

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

2. 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')}
           ...
       />)
   });
   

来源：https://stackoverflow.com/questions/59716959/react-native-maps-custom-markers-cause-extreme-lag-and-slow-down-on-android