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

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

0 голосов
/ 14 июля 2020

Я создаю собственную карту реакции, используя 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} в свойствах Marker? Когда пользователь щелкает кластер, появляется всплывающее окно, показывающее, сколько контактов находится в кластере. Я хочу вывести этот текст оттуда и отобразить его над кластером. Обратите внимание, что при рендеринге внутри маркера есть закомментированная строка. Без комментариев визуально он делает почти то, что нужно, но с ужасной производительностью на телефоне (1 кадр / с было бы преувеличением).

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

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

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

Я был бы очень рад, если бы кто-нибудь мог помочь!

1 Ответ

0 голосов
/ 14 июля 2020

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

...