Lottie-React-Native 动画在 Android 上不显示的解决方案

在 React Native 开发中，Lottie 是一个非常流行的动画库，它允许开发者轻松地在应用中展示高质量的矢量动画。然而，在使用 lottie-react-native 时，开发者可能会遇到一个常见问题：动画在 iOS 设备上正常显示，但在 Android 设备上却完全不显示。

问题现象

当开发者将一个 Lottie JSON 动画文件通过 LottieView 组件渲染时，可能会发现以下情况：

• 在 iOS 设备上（如 iPhone 13 Pro、iPhone XR 等）动画正常播放
• 在 Android 设备上（如三星 Galaxy S21、小米 Redmi Note 8 Pro 等）动画完全不显示
• 控制台没有任何错误日志输出

问题根源

经过深入分析，发现这个问题通常是由于 Lottie JSON 文件中的某些数值格式不符合 Android 平台的解析要求导致的。具体表现为：

1. JSON 文件中包含浮点数，而 Android 的 Lottie 解析器期望的是整数
2. 最常见的问题出现在 h（高度）属性上，当这个属性值为浮点数时（如 102.51802825927734），Android 解析器会抛出异常
3. iOS 平台的解析器对数值类型的容忍度更高，能够正确处理浮点数

解决方案

要解决这个问题，可以采取以下步骤：

1. 检查 JSON 文件：打开你的 Lottie JSON 动画文件
2. 查找数值属性：特别是 h（高度）、w（宽度）等属性
3. 修改数值格式：将所有浮点数改为最接近的整数值
   • 例如：将 "h": 102.51802825927734 改为 "h": 102
4. 保存并测试：保存修改后的文件，重新在 Android 设备上测试

技术原理

这个问题的本质在于不同平台对 JSON 数值类型的处理差异：

• Android 的 Lottie 解析器使用 Moshi 库进行 JSON 解析
• Moshi 对类型检查非常严格，当它期望一个整数时，如果遇到浮点数就会抛出 JsonDataException
• iOS 的实现则更加宽松，能够自动处理浮点数到整数的转换
• 这种差异导致了跨平台行为不一致的问题

最佳实践

为了避免这类问题，建议：

1. 在设计动画时，尽量使用整数作为尺寸参数
2. 在导出 Lottie JSON 文件前，检查并确保所有尺寸参数都是整数
3. 使用 Lottie 官方提供的功能支持检查工具验证动画文件的兼容性
4. 在开发过程中，同时在 iOS 和 Android 设备上测试动画效果

总结

Lottie-react-native 是一个强大的动画解决方案，但在跨平台使用时需要注意不同平台的实现差异。通过理解 Android 平台对 JSON 数值类型的严格要求，并采取相应的预防措施，开发者可以确保动画在所有设备上都能正常显示。记住，当遇到 Android 上动画不显示的问题时，检查 JSON 文件中的数值格式应该是首要的排查步骤。