添加新标记后，"反应原生地图"变得非常慢

Question

我完全被这个问题难住了。

首先，此错误仅发生在我的应用程序的Android发布版本中，似乎不会影响iOS，我无法在调试中重现它。

从package.json：

"react-native": "0.62.2",
"react-native-maps": "0.27.1",

我有一张地图，可以为附近的事件渲染非自定义标记。在用户添加新事件之前，一切都很顺利。事件将添加到服务器，应用与服务器同步，新事件将添加到 Redux 中的状态。如果我在创建事件后切换回地图视图，那么我可以看到新标记，但现在如果我移动地图，它会非常生涩。

我花了几天时间试图弄清楚这一点，我注意到的一些事情是：

• 它只发生在添加新事件后的大约 80% 的时间。
• 如果我在后台应用程序并再次打开它，那么地图将再次流畅地移动。
• 如果我删除刚刚添加的事件，标记将被删除，地图将变得平滑。
• 我记录了地图组件的渲染，渲染的数量没有什么异常(即它不会在每个区域更改或类似的事情上尝试重新渲染(。
• 我尝试在与服务器同步之前清除所有事件(并在刷新期间隐藏所有标记(。不能解决问题。

我从其他尚未解决问题/已经实施的帖子中尝试过的建议解决方案：

• 标记已经有道具tracksViewChanges={false}
• 从地图道具中删除onRegionChange
• 删除了我为各种按钮以及其他地图组件(多边形(准备的透明叠加层。

相关代码

// Map.ts
<View style={styles.container}>
{/* <Banner bannerState={bannerState} text={bannerText} /> */}
<MapView
showsUserLocation
rotateEnabled={false}
pitchEnabled={false}
moveOnMarkerPress={false}
showsMyLocationButton={false}
showsTraffic={false}
showsIndoors={false}
style={styles.map}
onRegionChange={this.onRegionChange}
onRegionChangeComplete={this.onRegionChangeComplete}
onPoiClick={this.onPoiClick}
initialRegion={this.initialRegion}
region={region}
>
<ItemMarkers
shouldUseDetailedMarkers
key='ITEM_MARKERS'
items={items}
makeOnPress={this.makeOnPressItem}
/>
{/* {this.HighlightedArea()} */}
</MapView>
</View>

const ItemMarkers = (props: {
items: IMapItem[];
makeOnPress: (index: number) => VoidFunction;
}): JSX.Element => {
const {items, makeOnPress} = props;

const renderMarker = (mapItem: IMapItem, index: number) => {
const {
description,
key,
title,
location: {latitude, longitude},
} = mapItem;

return (
<DefaultMarker
key={key}
latitude={latitude}
longitude={longitude}
title={title}
description={description}
onPress={makeOnPress(index)}
/>
);
};

return <View key='ITEM_MARKERS'>{items.map(renderMarker)}</View>;
};

// Marker component that gets rendered within DefaultMarker
<Marker
key={props.key}
stopPropagation
style={styles.marker}
identifier={props.key}
tracksViewChanges={false}
coordinate={{ latitude, longitude }}
onPress={props.onPress}
/ >

如果您想查看其他代码，请告诉我，提前感谢！我不知道还能尝试什么。

Answer 1

我发现了一个非常"黑客"的解决方法......我给<Map... / >一个密钥，该密钥与会话中创建的事件数相关联(即key={MAP_KEY_${numCreatedEvents}}'。这实质上是强制地图在用户添加新事件时完全刷新。

这不是一个很好的解决方案，但它解决了我的直接问题。会将其标记为已接受，除非有人可以提出更优雅的建议。