Lottie React Native 在 iOS 上动画结束回调失效问题解析

问题背景

在使用 Lottie React Native 库时，开发者经常遇到一个典型问题：在 iOS 平台上，onAnimationFinish 回调函数无法正常触发。这个问题在新架构（Fabric）环境下尤为突出，特别是在 React Native 0.72 版本中。

核心问题分析

经过深入的技术调查，我们发现这个问题主要源于以下几个方面：

1. 版本兼容性问题：Lottie React Native 7.0.0 及以上版本已不再支持 React Native 0.72，而许多项目仍在使用这些旧版本组合。

2. 新架构适配缺陷：在 Fabric（新架构）环境下，Lottie 5.x 版本根本没有包含支持新架构的必要文件，这导致了一系列兼容性问题。

3. 回调函数覆盖问题：在 Lottie React Native 7.1.0 之前的版本中，onAnimationFinish 回调会被其他属性调用意外覆盖，这在 iOS 平台上表现得尤为明显。

技术解决方案

1. 升级版本组合

最根本的解决方案是升级到正确的版本组合：

• 使用 Lottie React Native 7.1.0 或更高版本
• 搭配支持的 React Native 版本（建议使用最新稳定版）

2. 新架构适配

对于使用 Fabric 新架构的项目：

• 必须使用 Lottie 7.1.0 及以上版本
• 该版本包含了专门针对新架构的修复，特别是回调函数被覆盖的问题

3. 临时解决方案（不推荐）

如果项目暂时无法升级，可以考虑以下临时方案：

• 使用 onLayout 事件结合动画时长来模拟结束回调
• 实现自定义的动画监听机制
• 但这种方法不稳定，建议尽快升级

最佳实践建议

1. 保持版本同步：始终使用 Lottie 官方推荐的 React Native 版本组合。

2. 测试策略：在 iOS 和 Android 平台上分别测试动画回调功能，特别是在新架构环境下。

3. 错误处理：为动画组件添加完善的错误处理逻辑，防止回调失效导致应用卡死。

4. 性能监控：在复杂动画场景下，监控回调函数的执行性能和内存使用情况。

结论

Lottie React Native 在 iOS 平台上的动画结束回调问题主要源于版本兼容性和新架构适配不足。通过升级到正确的版本组合（特别是 7.1.0 及以上版本），可以彻底解决这个问题。对于使用新架构的项目，必须确保使用完全支持 Fabric 的 Lottie 版本，以避免各种潜在的回调和性能问题。