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

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

Answer 2

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

<MapViewDirections optimizeWaypoints={true}/>