'react-native-maps' 添加新标记后变得非常慢

Question

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

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

来自 package.json:

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

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

我花了几天时间试图解决这个问题，我注意到的一些事情是：

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

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

标记已经有道具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

我找到了一个非常 'hacky' 解决问题的方法...我给 <Map... / > 一个键，它与会话中创建的事件数相关（即 key={MAP_KEY_${numCreatedEvents} }`。当用户添加新事件时，这实际上会强制地图完全刷新。

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

'react-native-maps' 添加新标记后变得非常慢

'react-native-maps' becomes extremely slow after adding new marker

react-native

react-native-maps