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

问题背景

在使用 React Native Maps 库（版本 1.9.0 及以上）时，Android 平台上出现了自定义标记(Marker)内容闪烁的问题。这个问题特别出现在使用 SVG 图标作为标记子内容的情况下，当标记通过 map 函数从可迭代列表中渲染时尤为明显。

问题表现

开发者报告称，在 Android 设备上，自定义标记会出现间歇性的闪烁或图形故障。这种闪烁现象在以下情况下尤为明显：

• 使用 SVG 格式的标记图标
• 标记通过 map 函数从列表中渲染
• 标记包含子组件内容而非简单的图片属性

技术分析

经过深入调查，这个问题与 React Native Maps 库内部处理标记渲染的方式有关，特别是在 Android 平台上。核心问题涉及以下几个方面：

1. 渲染机制变化：从 1.9.0 版本开始，库对标记的渲染方式进行了调整，影响了 Android 平台上的表现。

2. 视图跟踪(tracksViewChanges)属性：这个属性控制标记是否跟踪视图变化以实现动画效果，但在新版本中可能导致渲染不稳定。

3. Google Maps SDK 兼容性：底层 Google Maps SDK 的渲染引擎与 React Native 视图系统的交互方式发生了变化。

解决方案

方案一：使用 LEGACY 渲染器

最有效的解决方案是在 MapView 组件中添加 googleRenderer="LEGACY" 属性。这个方案需要注意以下几点：

1. 全局应用：由于 Google Maps SDK 的渲染引擎只初始化一次，因此需要在应用程序中首次渲染的 MapView 组件上设置此属性。

2. 完全重启应用：修改后需要完全关闭并重新启动应用，简单的重新加载可能不会生效。

3. 一致性原则：建议在所有 MapView 实例上都添加此属性，以确保渲染行为一致。

方案二：优化 tracksViewChanges 属性

对于需要动态更新标记样式的场景，可以采用以下优化策略：

1. 初始启用，随后禁用：在组件挂载后短暂启用 tracksViewChanges，然后禁用它。

2. 使用自定义包装组件：创建一个优化过的标记组件，自动管理 tracksViewChanges 状态。

方案三：图片替代方案

在某些情况下，将 SVG 图标转换为 PNG 格式可以缓解问题，但这可能不是最理想的解决方案，特别是需要动态修改图标颜色的场景。

最佳实践建议

1. 版本选择：如果项目允许，考虑使用 1.8.4 或更早版本以避免此问题。

2. 性能权衡：在动态更新需求与渲染稳定性之间找到平衡点，必要时接受轻微的性能损失。

3. 测试策略：在不同 Android 设备和版本上进行充分测试，确保解决方案的普适性。

结论

React Native Maps 库在 Android 平台上的标记渲染问题主要源于底层渲染引擎的变化。使用 LEGACY 渲染器是目前最可靠的解决方案，特别是在应用程序的初始 MapView 实例上设置此属性。随着 Google Maps SDK 的更新，这个问题有望在未来版本中得到根本解决。开发者应根据具体应用场景选择最适合的解决方案，平衡功能需求与用户体验。