Реагирование мерцания маркеров собственной карты при обновлении состояния - PullRequest
Новая
       37

Реагирование мерцания маркеров собственной карты при обновлении состояния

0 голосов
/ 12 апреля 2020

У нас есть несколько координат, которые нам нужно отобразить на карте с помощью маркеров. Маркер, выбранный пользователем, должен быть помечен как активный и иметь некоторые операции, выполняемые для других функций.

Когда я обновляю состояние в onPress метке маркера, все маркеры мерцают, вероятно из-за повторного рендеринга. Я также добавил уникальный ключ, но он, похоже, не работает.

У меня есть массив с именем markers , который используется для визуализации маркеров на карте. 

return markers.map(marker => (
      <Marker
        tracksViewChanges={false}
        tracksInfoWindowChanges={false}
        animationEnabled={false}
        identifier={marker.id}
        key={marker.id}
        coordinate={{
          latitude: marker.location.latitude,
          longitude: marker.location.longitude,
        }}
        onPress={() => {
          setActiveMarker(marker.id);  // State update using hook
        }}>
        //Rendering the custom marker image here
        {if(activeMarker === marker.id)
        (<Icon
          width={22}
          height={32}
          source={require('../../assets/images/marker.png')})
        else
         (<Icon
          width={22}
          height={32}
          source={require('../../assets/images/activeMarker.png')})
         }
        />
      </Marker>
));

Версия реагирующей карты: 0.27.1

1 Ответ

0 голосов
/ 12 апреля 2020

Вы можете использовать React.memo, чтобы избежать дорогостоящего рендеринга.

https://reactjs.org/docs/react-api.html#reactmemo

const Markers = React.memo(({markers}) => {
  return markers.map( ... );
})
...