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

问题背景

在使用 Lottie React Native 库时，开发者报告了一个特定于 iOS 平台的问题：onAnimationFinish 回调函数在动画完成后没有被触发。这个问题出现在 React Native 0.74.3 版本中，且仅在使用 Fabric（新架构）时发生，Android 平台则表现正常。

问题表现

开发者在使用 LottieView 组件时，按照常规方式设置了 onAnimationFinish 回调：

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

在 Android 平台上，这个回调能够正常工作，但在 iOS 平台上却完全不会被调用。这个问题影响了多个开发者，特别是在使用 Expo SDK 52 并启用新架构的项目中。

技术分析

经过社区贡献者的深入调查，发现问题根源在于 iOS 平台的实现逻辑。在 Fabric 架构下，iOS 端的动画完成事件没有被正确传递到 JavaScript 层。这属于一个平台特定的实现缺陷，而非设计问题。

解决方案

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

1. 确保 iOS 平台正确监听动画完成事件
2. 将事件通过正确的桥接机制传递到 JavaScript 层
3. 保持与 Android 平台一致的行为

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

升级建议

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

1. 检查当前使用的 Lottie React Native 版本
2. 如果版本低于 7.1.0，执行升级命令
3. 重新构建 iOS 应用
4. 验证 onAnimationFinish 回调是否正常工作

总结

这个问题展示了跨平台开发中常见的平台差异挑战。Lottie React Native 作为一个流行的动画库，其社区能够快速响应并解决问题，体现了开源生态的优势。开发者在使用这类库时，应当关注版本更新，并及时应用修复，以确保最佳的用户体验。

对于依赖动画完成回调来实现业务逻辑的应用，这个问题尤为重要。升级到修复版本后，开发者可以放心地在 iOS 平台上使用这一功能，确保应用在所有平台上表现一致。