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( ... );
})

Answer 2

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

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

2 个答案: