如何解决MapView中onRegionChange触发时Marker闪烁问题？

问题成因分析 #

• Marker的key不稳定：你给Marker设置的key包含new Date().getMilliseconds()，每次组件渲染都会生成新的key，React会判定这是全新组件，销毁旧Marker再创建新的，直接引发闪烁。
• onRegionChange频繁触发状态更新：onRegionChange会在地图拖动过程中持续触发，每次调用setCurrentCoordinate更新状态，导致Marker跟着频繁重新渲染。
• followsUserLocation属性冲突：开启followsUserLocation后，地图会自动跟踪用户位置，同时你手动更新currentCoordinate，可能引发坐标重复更新和组件冲突。

解决方案 #

1. 替换Marker的稳定key #

把Marker的key换成固定且唯一的值，避免每次渲染生成新key：

<Marker
    coordinate={{
        latitude: currentCoordinate[0],
        longitude: currentCoordinate[1],
    }}
    key={`project-${type}-${currentCoordinate[0]}-${currentCoordinate[1]}`} // 用坐标或项目唯一ID作为key的一部分
    pinColor={'#0c43b0'}
    identifier={'mk1'}
>
    <Image alt={'project_logo'} source={require('../../../assets/pin.png')} w="38" h="51" />
</Marker>

2. 减少状态更新频率 #

如果不需要实时在拖动过程中更新坐标，改用onRegionChangeComplete代替onRegionChange，只在拖动结束后更新状态：

<MapView
    // ...其他属性
    onRegionChangeComplete={(e) => handlerUpdateAddressInfo(e)}
>

如果必须实时更新，给handlerUpdateAddressInfo添加防抖处理，避免短时间内多次触发状态更新：

// 自己实现防抖函数
const debounce = (func, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
};

const handlerUpdateAddressInfo = useCallback(debounce((e) => {
    setCurrentCoordinate([e?.latitude, e?.longitude]);
}, 100), []);

3. 检查followsUserLocation属性 #

如果Marker是用来显示地图中心坐标而非用户位置，建议关闭followsUserLocation，避免自动跟踪和手动更新的冲突：

<MapView
    // ...其他属性
    followsUserLocation={false}
>

内容的提问来源于stack exchange，提问作者DevGe