反应原生地图标记在状态更新时闪烁答案

【问题标题】：React native map markers flicker on state update反应原生地图标记在状态更新时闪烁
【发布时间】：2020-04-12 06:30:38
【问题描述】：

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

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

【问题讨论】：

标签： react-native react-native-maps react-native-map-clustering

【解决方案1】：

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

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

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

【讨论】：

我已经更新了问题。它不适用于记忆的原因是，如果标记图像变为活动状态，则需要更新它。
@Nikhil 如果在map函数内部有使用activeMarker的条件表达式，则必须以序数React方式重新渲染，使用props和state。
@Nikhil 为避免这种情况，请使用Animated API（或Reanimated）为Icon 的不透明度值设置动画。

【解决方案2】：

如果任何人看到他们的标记在选择时闪烁（如果您在选择时更改其样式），请确保您没有两个标记在相同的确切位置重叠。我遇到了这个奇怪的闪烁问题，花了一个小时试图弄清楚发生了什么，结果我复制了我的虚拟数据，并且每个位置都有两个标记重叠?

【讨论】：