React Native Maps：自定义标记导致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")}
    />)
});

我在模拟器和真机上测试过，并且两者都遇到了问题。

提示：我使用react-native-map-clustering包进行标记聚类。

- Mahdi Bashirpour

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

- Mahdi Bashirpour

---

带有索引的键是不良实践，它没有性能优化，并且存在缺点。 - beka kokhodze

除非你改变了列表本身，否则它不会产生任何负面影响。但是我同意你的观点，这样做并不会帮助提高性能。 - Raushan

设置tracksViewChanges是胜利者，对我产生了巨大的影响。 - koosa

有没有办法解决我的问题？非常感谢。 - Zuet

tracksViewChanges={false} 对我的项目有效。谢谢。 - Kushal Desai

“tacksViewChanges={false}” 对我来说非常重要，尤其是在安卓谷歌地图上。谢谢！ - Dillion Cixx

Answer 2

如果您使用MapViewDirections，则必须将props传递为optimizeWaypoints=true，问题就会消失，并且需要完全重新运行程序。

<MapViewDirections optimizeWaypoints={true}/>

- Mafei