添加新标记后，“react-native-maps”变得非常慢答案

【问题标题】：'react-native-maps' becomes extremely slow after adding new marker添加新标记后，“react-native-maps”变得非常慢
【发布时间】：2020-08-11 03:29:46
【问题描述】：

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

首先，此错误仅发生在我的应用的 Android 版本 版本中。好像对 iOS 没有影响，我也无法在 debug 中重现。

来自 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>;
};

。 // 在 DefaultMarker 中呈现的标记组件

<Marker
  key={props.key}
  stopPropagation
  style={styles.marker}
  identifier={props.key}
  tracksViewChanges={false}
  coordinate={{ latitude, longitude }}
  onPress={props.onPress}
/ >

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

【问题讨论】：

标签： react-native react-native-maps

【解决方案1】：

我发现了一个非常“hacky”的方法来解决这个问题...我给<Map... / > 提供了一个密钥，它与会话中创建的事件数量相关（即key={MAP_KEY_${numCreatedEvents}}`。这实际上强制映射当用户添加新事件时完全刷新。

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

【讨论】：