调用enableLatestRenderer致Android端react-native-maps Marker子元素闪烁求助

问题背景 #

按Google Maps Platform建议升级Android端Maps SDK到最新渲染器，在App.js中调用enableLatestRenderer()后，所有自定义Marker出现闪烁问题。设置tracksViewChanges={false}可消除闪烁，但会导致用Animated.Image实现的Marker选中缩放效果失效。自定义Marker代码如下：

return (
  <Marker
    key={index}
    coordinate={{
      latitude: Number(marker.lat),
      longitude: Number(marker.lng),
    }}
    // tracksViewChanges={false}
    onPress={(e) => onMarkerPress(e)}>
    <Animated.View style={styles.markerStyle}>
      <Animated.Image
        source={require('../../assets/images/appicon.webp')}
        resizeMode='contain'
        style={[styles.markerImage, scaleStyle]}></Animated.Image>
    </Animated.View>
  </Marker>
);

解决方案 #

方案1：用状态控制样式变换替代Animated组件 #

放弃Animated.Image，直接通过状态控制Marker内部图片的缩放样式，保持tracksViewChanges默认值（即不设置为false），既规避闪烁又实现选中缩放：

import { useState } from 'react';

// 组件内维护选中Marker的ID状态
const [selectedMarkerId, setSelectedMarkerId] = useState(null);

// 根据选中状态生成缩放样式
const getMarkerScaleStyle = (markerId) => {
  const scale = selectedMarkerId === markerId ? 1.5 : 1;
  return { transform: [{ scale }] };
};

// 自定义Marker部分
return (
  <Marker
    key={index}
    coordinate={{
      latitude: Number(marker.lat),
      longitude: Number(marker.lng),
    }}
    onPress={() => setSelectedMarkerId(marker.id)}>
    <View style={styles.markerStyle}>
      <Image
        source={require('../../assets/images/appicon.webp')}
        resizeMode='contain'
        style={[styles.markerImage, getMarkerScaleStyle(marker.id)]}
      />
    </View>
  </Marker>
);

方案2：调整最新渲染器的配置 #

在AndroidManifest.xml中添加渲染器配置，尝试禁用可能引发闪烁的特性：

<meta-data
  android:name="com.google.android.gms.maps.v2.API_OPTIONS"
  android:value="liteMode=false;renderer=latest"/>

若仍有问题，可临时回退到旧渲染器（不推荐长期使用，官方后续可能停止支持）：
在App.js中替换enableLatestRenderer()为：

import { enableOldRenderer } from 'react-native-maps';

enableOldRenderer();

方案3：开启Animated原生驱动 #

如果必须保留Animated.Image，给Animated组件开启原生驱动，减少JS层与原生层的交互冲突：

<Animated.View 
  style={styles.markerStyle}
  useNativeDriver={true}
>
  <Animated.Image
    source={require('../../assets/images/appicon.webp')}
    resizeMode='contain'
    style={[styles.markerImage, scaleStyle]}
    useNativeDriver={true}
  />
</Animated.View>

开启原生驱动后，动画由原生层直接处理，可能避免tracksViewChanges导致的闪烁与动画失效问题。

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