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

问题现象描述

在 React Native Maps 项目中，当使用包含子组件内容的自定义标记(Marker)时，Android 平台上会出现标记内容闪烁或显示异常的问题。这个问题从 1.9.0 版本开始出现，在 1.8.4 及以下版本中则表现正常。

典型的使用场景是：开发者通过 map 方法遍历数据数组，为每个数据项创建一个包含 SVG 图标的自定义标记。这些标记在 Android 设备上会随机出现闪烁或显示异常的情况，而 iOS 平台则不受影响。

问题根源分析

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

1. 标记的子组件内容（特别是 SVG 图形）在渲染过程中会出现重绘异常
2. 问题主要出现在使用较新版本的 Google Maps 渲染引擎时
3. 标记的 tracksViewChanges 属性设置会影响问题表现，但不能完全解决问题

解决方案

1. 使用 LEGACY 渲染引擎

最有效的解决方案是在 MapView 组件中添加 googleRenderer="LEGACY" 属性。这个设置会强制使用 Google Maps 的旧版渲染引擎，从而避免闪烁问题。

需要注意的是：

• 必须在应用中第一个渲染的 MapView 组件上设置此属性
• Google Maps SDK 的渲染引擎只会初始化一次，后续 MapView 实例会沿用第一个实例的渲染设置
• 为了代码一致性，建议在所有 MapView 组件上都添加此属性

2. 优化标记实现

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

const [tracksViewChanges, setTracksViewChanges] = useState(true);

useEffect(() => {
  const timer = setTimeout(() => {
    setTracksViewChanges(false);
  }, 1000);
  
  return () => clearTimeout(timer);
}, []);

这种实现会在标记初次渲染时启用视图跟踪，确保正确显示，然后在一段时间后禁用跟踪以提高性能。

3. 替代方案考虑

如果上述方法仍不能满足需求，可以考虑以下替代方案：

• 使用 PNG 图片替代 SVG 作为标记内容
• 将标记内容转换为位图后作为 image 属性传递给 Marker 组件
• 对于静态标记，完全禁用 tracksViewChanges 属性

最佳实践建议

1. 对于新项目，建议从一开始就使用 googleRenderer="LEGACY" 属性
2. 对于动态标记内容，合理使用 tracksViewChanges 属性控制渲染行为
3. 在性能允许的情况下，优先使用位图而非矢量图形作为标记内容
4. 确保应用中所有 MapView 实例的渲染设置一致

总结

React Native Maps 在 Android 平台上的标记闪烁问题主要源于 Google Maps SDK 的渲染机制变化。通过使用 LEGACY 渲染引擎和合理控制标记的视图跟踪行为，可以有效解决这一问题。开发者应根据具体应用场景选择最适合的解决方案，并在整个应用中保持一致的渲染设置。

随着 Google Maps SDK 的更新，这个问题可能会在未来版本中得到根本解决。在此之前，上述解决方案为开发者提供了稳定可靠的临时应对措施。