Lottie-React-Native 在 iOS 上的动画完成回调问题解析

在 React Native 生态系统中，Lottie 动画库因其强大的矢量动画支持而广受欢迎。然而，近期在 Lottie-React-Native 6.7.2 版本中，开发者们遇到了一个特定于 iOS 平台的问题：onAnimationFinish 回调函数无法正常触发。

问题现象

当开发者在 Fabric 架构（React Native 0.74.3 的新架构）下使用 Lottie 组件时，发现以下代码在 iOS 平台上无法正常工作：

<LottieView
    source={require('path/to/animation.json')}
    autoPlay
    loop={false}
    onAnimationFinish={() => {
        console.log('动画完成');
    }}
/>

值得注意的是，这个问题仅出现在 iOS 平台，Android 平台表现正常。许多开发者报告了相同的问题，表明这是一个普遍存在的缺陷而非个别案例。

问题根源

经过社区贡献者的深入调查，发现问题出在 iOS 原生代码的实现上。在新架构（Fabric）下，iOS 端的动画完成事件没有正确桥接到 JavaScript 层。具体来说：

1. 动画播放完成后，原生层确实触发了完成事件
2. 但由于桥接代码的缺失或错误，这个事件没有被传递到 React Native 的 JavaScript 运行时
3. 导致开发者设置的 onAnimationFinish 回调永远不会被执行

解决方案

社区贡献者 MaxToyberman 发现了这个问题并提交了修复代码。解决方案主要包括：

1. 确保 iOS 原生代码正确实现了事件发射机制
2. 修复了事件从原生层到 JavaScript 层的桥接
3. 验证了回调函数在各种情况下的可靠性

这个修复已经包含在 Lottie-React-Native 的 7.1.0 版本中。开发者只需将库升级到最新版本即可解决此问题。

升级建议

对于遇到此问题的开发者，建议采取以下步骤：

1. 将 lottie-react-native 升级到 7.1.0 或更高版本
2. 检查项目中是否有其他依赖项需要同步更新
3. 清理构建缓存（特别是 iOS 的 DerivedData）
4. 重新测试动画完成回调功能

总结

这个问题展示了 React Native 新架构下可能遇到的一些桥接挑战。作为开发者，当遇到平台特定的问题时，应该：

1. 首先确认问题是否已被报告
2. 尝试在最新版本中复现
3. 必要时提供最小化复现项目帮助维护者定位问题
4. 关注官方发布的更新和修复

Lottie-React-Native 作为一个社区驱动的项目，依赖开发者的反馈和贡献来不断完善。这次问题的快速解决正是社区协作力量的体现。