'react-native-maps' становится очень медленным после добавления нового маркера - PullRequest
Новая
       12

'react-native-maps' становится очень медленным после добавления нового маркера

0 голосов
/ 16 июня 2020

Я полностью озадачен этой проблемой.

Во-первых, эта ошибка возникает только в Android версии моего приложения. Кажется, не влияет на iOS, и я не могу воспроизвести его при отладке.

Из пакета. json: 

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

У меня есть карта, которая отображает ненастроенные маркеры ближайших событий. Все идет гладко, пока пользователь не добавит новое событие. Событие добавляется на сервер, приложение синхронизируется с сервером, а новое событие добавляется к состоянию в Redux. Если я вернусь в режим просмотра карты после создания события, я смогу увидеть новый маркер, но теперь, если я перемещаю карту, он становится невероятно рывчатым.

Я потратил пару дней, пытаясь понять это out, и некоторые вещи, которые я заметил:

  • Это происходит только примерно в 80% случаев после добавления новых событий.
  • Если я открою приложение в фоновом режиме и снова открою его, тогда карта снова перемещается плавно.
  • Если я удалю только что добавленное событие, маркер будет удален и карта станет гладкой.
  • Я зарегистрировал рендеры компонента карты, и в этом нет ничего необычного количество рендеров (т.е. он не пытается повторно рендерить при каждом изменении региона или чего-то подобного).
  • Я попытался очистить все события перед синхронизацией с сервером (и скрыть все маркеры во время обновления sh). Не решает проблему.

Предлагаемые решения, которые я пробовал из других сообщений, которые не исправили проблему / были уже реализованы:

  • Маркеры уже имеют опору 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}
/ >

Сообщите мне, если есть другой код, который вы хотели бы увидеть, и заранее спасибо! Не знаю, что еще попробовать.

1 Ответ

0 голосов
/ 16 июня 2020

Я нашел очень «хакерский» способ решения проблемы ... Я даю ключ к <Map... / >, который привязан к количеству событий, созданных в сеансе (например, key={MAP_KEY_${numCreatedEvents}} `. Это, по сути, заставляет карту полностью обновлять sh, когда новые события добавляются пользователем.

Это не лучшее решение, но оно решает мою непосредственную проблему. Отметим его как принятый, если кто-то не предложит что-то более элегантное.

...