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

问题背景

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

核心问题分析

经过深入分析，这个问题主要由以下几个技术因素导致：

1. 版本兼容性问题：Lottie React Native 7.0.0 及以上版本已不再支持 React Native 0.72，而早期版本在新架构下存在功能缺陷。

2. 新架构适配问题：在 Fabric 架构下，Lottie 的某些属性回调会被其他属性覆盖，导致 onAnimationFinish 无法正常触发。

3. iOS 平台特殊性：iOS 平台的动画处理机制与 Android 存在差异，更容易暴露底层实现的问题。

技术解决方案

1. 升级版本组合

推荐使用以下版本组合：

• React Native 0.73 或更高版本
• Lottie React Native 7.1.0 或更高版本

这个组合修复了新架构下的回调问题，并提供了更好的稳定性。

2. 代码实现优化

对于必须使用旧版本的场景，可以采用以下优化方案：

// 使用 useEffect 监听动画状态变化
useEffect(() => {
  if (animationRef.current) {
    animationRef.current.play();
    
    // 添加超时回退机制
    const timeout = setTimeout(() => {
      onAnimationFinish();
    }, 2000); // 根据动画时长调整
    
    return () => clearTimeout(timeout);
  }
}, [showGiftAnimation]);

3. 动画资源优化

确保 Lottie 动画 JSON 文件：

• 包含明确的结束标记
• 不包含无限循环属性
• 在 Bodymovin 导出时选择正确版本

最佳实践建议

1. 统一版本管理：确保项目中所有相关库版本兼容，特别是：

   • react-native
   • lottie-ios
   • lottie-react-native

2. 测试策略：

   • 在真机上测试动画回调
   • 针对不同 iOS 版本进行测试
   • 监控内存使用情况

3. 错误处理：

   <LottieView
     onAnimationFinish={() => {
       try {
         onAnimationFinish();
       } catch (e) {
         console.error('Animation finish error:', e);
         // 回退处理
       }
     }}
   />
   

总结

Lottie React Native 在 iOS 平台上的动画结束回调问题主要源于版本兼容性和新架构适配。通过升级到推荐的版本组合，并采用适当的代码优化策略，可以有效解决这个问题。对于维护旧项目的开发者，可以采用超时回退等机制确保功能完整性，但长期解决方案仍然是升级到官方支持的版本组合。

在动画实现过程中，建议开发者密切关注官方更新日志，特别是涉及新架构和跨平台兼容性的改进，以确保获得最佳的用户体验和开发体验。