React Native Maps 中 Android 自定义标记闪烁问题的分析与解决方案

问题现象描述

在使用 React Native Maps 库时，Android 平台上出现了一个令人困扰的视觉问题：当使用子内容（Children Content）方式创建自定义标记（Marker）时，标记会出现间歇性的闪烁或视觉故障。这个问题从 1.9.0 版本开始出现，在之前的 1.8.4 及以下版本中则表现正常。

典型的使用场景是开发者通过 map 方法遍历数据列表来渲染多个标记，这些标记通常采用 SVG 格式的图标。值得注意的是，这种闪烁问题只发生在屏幕初次渲染时，而非由多次重复渲染引起。

技术背景解析

React Native Maps 提供了两种方式来创建自定义标记：

1. 通过 image 属性直接设置标记图片
2. 通过子组件方式（Children Content）实现更复杂的标记内容

后者虽然提供了更大的灵活性，允许开发者使用任意 React 组件作为标记内容，但也带来了额外的性能开销和潜在的渲染问题。

问题根源探究

经过社区多方面的测试和分析，发现这个问题的根本原因与 Google Maps SDK 的渲染机制有关。具体表现为：

1. 渲染器初始化问题：Google Maps SDK 的渲染器在应用生命周期中只初始化一次
2. 新旧渲染器兼容性：新版渲染器（非 LEGACY）在处理动态标记内容时存在性能问题
3. 标记更新机制：tracksViewChanges 属性的设置会影响标记的更新行为

解决方案汇总

1. 使用 LEGACY 渲染器

最有效的解决方案是强制使用旧版渲染器：

<MapView googleRenderer="LEGACY">
  {/* 标记内容 */}
</MapView>

注意事项：

• 需要在应用中最先渲染的 MapView 组件上设置此属性
• 必须完全重启应用才能使设置生效（热重载无效）
• 建议在所有 MapView 实例上都添加此属性以确保一致性

2. 优化标记更新策略

对于需要动态更新的标记，可以结合 tracksViewChanges 属性进行优化：

const [tracksView, setTracksView] = useState(true);

useEffect(() => {
  if(Platform.OS === 'android') {
    setTimeout(() => {
      setTracksView(false);
    }, 100);
  }
}, []);

<Marker tracksViewChanges={tracksView}>
  {/* 标记内容 */}
</Marker>

3. 使用图片替代组件

对于简单标记，考虑使用 image 属性而非子组件：

<Marker image={require('./pin.png')} />

进阶优化建议

1. 图片格式选择：优先使用 PNG 而非 SVG，特别是在标记数量较多时
2. 自定义标记组件：封装一个优化后的标记组件，统一处理渲染逻辑
3. 性能监控：在开发阶段使用 React Native 性能工具监控标记渲染性能

总结

React Native Maps 在 Android 平台上的标记闪烁问题主要源于 Google Maps SDK 的渲染机制。通过强制使用 LEGACY 渲染器可以最有效地解决这个问题，同时结合适当的标记更新策略和图片优化，可以确保地图标记在各种场景下都能稳定渲染。

对于需要高度自定义标记内容的项目，建议评估性能需求，在灵活性和性能之间找到平衡点。随着 Google Maps SDK 的更新，这个问题有望在未来版本中得到根本解决。