Lottie-React-Native 在 Android 上的常见问题解析

问题背景

在使用 lottie-react-native 动画库时，开发者可能会遇到一个仅在 Android 平台上出现的错误："Cannot convert undefined value to object"。这个错误通常表现为动画在 iOS 上运行正常，但在 Android 设备上却无法显示并抛出异常。

错误原因分析

这个问题的根本原因通常与版本兼容性有关。具体表现为：

1. 版本不匹配：当使用较旧的 lottie-react-native v5 版本与较新的 Expo 50 及以上版本配合使用时，会出现兼容性问题。Expo Go 客户端的最新版本已经内置了 Lottie v6 的支持。

2. 组件尺寸问题：即使升级到正确版本后，如果没有为 Lottie 组件明确指定尺寸（高度和宽度），动画也可能无法正常显示，表现为空白区域。

解决方案

版本升级方案

1. 将 lottie-react-native 升级到 v6 版本，这是当前维护的稳定版本
2. 遵循官方提供的 v5 到 v6 的迁移指南进行必要的代码调整

组件尺寸设置

升级版本后，必须为 Lottie 组件设置明确的尺寸：

<LottieView
  source={require("./animation.json")}
  style={{
    width: '100%',
    height: '100%'
  }}
  autoPlay
  loop
/>

最佳实践建议

1. 保持版本同步：始终确保 lottie-react-native 版本与 Expo 版本保持兼容
2. 明确组件尺寸：为 Lottie 组件设置明确的宽度和高度
3. 测试双平台：开发过程中应在 iOS 和 Android 双平台上进行测试
4. 错误处理：考虑添加错误回调处理以捕获可能的加载问题

总结

通过升级到正确的 lottie-react-native 版本并确保组件有明确的尺寸定义，可以解决 Android 平台上出现的 "Cannot convert undefined value to object" 错误。这提醒我们在跨平台开发中，版本管理和组件基础属性的设置都是需要特别注意的关键点。