React Native Maps：自定义标记导致极端滞后并在 android 上变慢答案

【问题标题】：React Native Maps: Custom Markers cause extreme lag and slow down on androidReact Native Maps：自定义标记导致极端滞后并在 android 上变慢
【发布时间】：2020-01-13 12:46:46
【问题描述】：

我在地图上最多加载了大约 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 包作为标记集群。

【问题讨论】：

标签： react-native google-maps react-native-android react-native-maps react-native-map-clustering

【解决方案1】：

我尝试了两种可以稍微提高性能的方法

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

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

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

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

【讨论】：

带索引的键是不好的做法，没有对其进行性能优化，它有缺点
@beqakokhodze 除非您更改列表，否则不会产生任何不良影响，但同意您的观点，即它不会有助于提高性能。
设置tracksViewChanges 是赢家，对我有很大的影响
有什么办法可以解决my problem？非常感谢

【解决方案2】：

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

<MapViewDirections optimizeWaypoints={true}/>

【讨论】：