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

问题背景

在使用 Lottie React Native 6.7.2 版本配合 React Native 0.74.3 的新架构(Fabric)时，开发者报告了一个特定问题：在 iOS 平台上，onAnimationFinish 回调函数无法正常触发。这个问题在 Android 平台上表现正常，但在 iOS 上完全失效。

问题表现

开发者在使用 Lottie 动画组件时，通常会设置一个动画完成后的回调函数，用于处理动画结束后的逻辑。典型代码如下：

<LottieView
  style={styles.lottie}
  source={require('路径/动画文件.json')}
  autoPlay
  loop={false}
  resizeMode="cover"
  onAnimationFinish={() => {
    console.log('动画完成回调')
  }}
/>

在 Android 平台上，这个回调能够正常执行，但在 iOS 平台上，回调函数完全不会被调用。

问题根源

经过社区贡献者的深入调查，发现问题出在 iOS 平台的实现层。在新架构(Fabric)下，iOS 端的回调机制没有正确地将动画完成事件传递到 JavaScript 层。这属于一个平台特定的实现缺陷。

解决方案

社区贡献者 MaxToyberman 发现了问题所在并提交了修复方案。主要修改点包括：

1. 确保 iOS 平台正确监听动画完成事件
2. 完善事件从原生层到 JavaScript 层的传递机制
3. 修复新架构下的回调处理逻辑

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

升级建议

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

1. 将 Lottie React Native 升级到 7.1.0 或更高版本
2. 检查项目中其他可能受影响的动画组件
3. 测试动画完成回调在所有目标平台上的表现

总结

这个问题展示了跨平台开发中常见的平台差异挑战。Lottie React Native 作为流行的动画解决方案，其社区积极响应并快速修复了这个问题。对于开发者而言，保持依赖库的最新版本是避免类似问题的有效方法。同时，这也提醒我们在实现跨平台功能时，需要特别注意各平台的特性和差异。