Низкая производительность на картах React Native, когда компоненты используются внутри маркера

Я создаю нативную карту, используя MapView из 'react-native-maps' и этот механизм кластеризации маркеров. Это компонент кластерного маркера, который отлично работает с молниеносной производительностью:

export default class ClusterMarker extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      tracksViewChanges: true
    }
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.props !== nextProps) {
      this.setState(() => ({
        tracksViewChanges: true,
      }))
    }
  }

  componentDidUpdate() {
    if (this.state.tracksViewChanges) {
      this.setState(() => ({
        tracksViewChanges: false,
      }))
    }
  }

  render() {    
    /*... 
      bunch of unrelated code where 'message', 'image', 'coordinate' and 'pointCount' are set
    ...*/
    return (
        <Marker
            anchor={{x:0.5,y:0.5}}
            centerOffset={{x:0.5,y:0.5}}
            coordinate={coordinate}
            image={image}
            title={pointCount}
            description={message}
            tracksViewChanges={this.state.tracksViewChanges}>
            {/* <Text>{pointCount}</Text> */}    <-------- I want this to work just as fast
        </Marker>
    )
  }
}

Видите этот title={pointCount} в реквизитах маркера? Когда пользователь щелкает кластер, появляется всплывающее окно, показывающее, сколько выводов имеется в кластере. Я хочу вывести этот текст оттуда и отобразить его поверх кластера. Обратите внимание, что в рендере внутри маркера есть строка с комментариями. Когда раскомментирован, визуально он делает почти то, что нужно, но с ужасной производительностью на телефоне (1 кадр в секунду было бы преувеличением).

Понятно, что проблема с текстом. Моя гипотеза состоит в том, что компонент Text продолжает проверять родителя на наличие обновлений текста или постоянно перерисовывает его без всякой причины. Вот список вещей, которые я пытался исправить:

  • Создайте компонент, расширяющий текст, выполняющий ту же задачу без странных обновлений или повторного рендеринга. Нет прироста фпс.
  • Создайте компонент, который отображает текст, но никогда не обновляет и не выполняет повторный рендеринг без какой-либо причины. Нет прироста фпс.
  • Добавьте логику tracksViewChanges, которую вы видите выше. Это было своего рода успехом, увеличив средний FPS с 1 до 5.
  • Используйте другие библиотеки кластеризации маркеров (все они не работали с достойной производительностью даже без Text inside Marker).
  • Множество хакерских решений из Интернета, ни одно из которых не улучшило производительность.

Эта карта в настоящее время работает в среднем с 20 000 пинов, и решение должно быть эффективным по мере увеличения этого количества пинов, потому что так оно и будет.

Буду очень рад если кто поможет!


person Renato Britto Araujo    schedule 14.07.2020    source источник


Ответы (1)


Возможно, это не тот ответ, который вы ищете, но 20 тысяч маркеров — это… много. Рассматривали ли вы кластеризацию маркеров на основе уровня масштабирования? Вы также можете отфильтровать маркеры, которых нет в окне просмотра карты.

person Adam Shurson    schedule 14.07.2020
comment
Дело в том, что он отлично работает, как и сейчас, даже на старых телефонах. Я группирую по уровням масштабирования, а также фильтрую столько, сколько могу. Должна быть возможность поместить туда тупой статический текст без такого сильного удара по производительности, потому что он и так работает нормально. Кроме того, это не 20 000 маркеров, это 20 000 контактов, которые группируются, изменил это в вопросе, извините за недоразумение. - person Renato Britto Araujo; 14.07.2020