反应本机地图标记在状态更新时闪烁

Question

我们需要使用标记在地图上显示多个坐标。用户单击的标记必须标记为活动，并且必须执行某些其他功能的操作。

当我在标记的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>
));

react-native-map版本：0.27.1

Answer 1

您可以使用React.memo避免昂贵的渲染。

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

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