升级react-native-reanimated至v3.6.1后Keyframe动画触发崩溃

问题描述 #

升级react-native-reanimated至v3.6.1版本后，所有使用Keyframe且包含transform属性的动画都会导致应用崩溃，模拟器中无任何错误提示。示例代码如下：

export const SampleKeyframe = new Keyframe({
  from: {
    transform: [{ rotate: '0deg' }],
  },
  to: {
    transform: [{ rotate: '45deg' }],
  },
});

该Keyframe用于简单的Animated View组件中，使用opacity等其他属性时动画可正常运行，仅transform属性会触发崩溃。

可能的解决方案 #

• 调整Reanimated版本
  v3.6.x版本可能存在Keyframe与transform结合的兼容性bug，建议暂时降级到v3.5.4等已知稳定版本，或者升级到最新的修复版本（若官方已发布）。执行命令：

  # 降级到v3.5.4
  npm install react-native-reanimated@3.5.4
  # 或升级到最新版本
  npm install react-native-reanimated@latest
  

• 替换Keyframe为函数式动画写法
  改用Reanimated推荐的useAnimatedStyle结合withTiming的写法，替代Keyframe实现旋转动画：

  import { useAnimatedStyle, withTiming, Easing, Animated } from 'react-native-reanimated';
  
  function RotatingComponent() {
    const animatedStyle = useAnimatedStyle(() => {
      return {
        transform: [{ rotate: withTiming('45deg', { 
          duration: 500, 
          easing: Easing.inOut(Easing.ease) 
        }) }],
      };
    });
  
    return <Animated.View style={[styles.box, animatedStyle]} />;
  }
  

• 清除项目缓存并重建
  升级后缓存可能导致异常，执行以下步骤清理：

  • 删除依赖并重新安装：rm -rf node_modules && npm install
  • 重置Metro缓存：npx react-native start --reset-cache
  • iOS端：进入ios目录执行pod deintegrate && pod install
  • Android端：进入android目录执行./gradlew clean

• 检查Reanimated配置完整性
  确保升级后Reanimated的配置已正确更新：

  • 在babel.config.js中确认react-native-reanimated/plugin已添加，且放在所有插件的最后：

    module.exports = {
      presets: ['module:metro-react-native-babel-preset'],
      plugins: [
        // 其他插件
        'react-native-reanimated/plugin',
      ],
    };
    

  • Android端确认android/app/build.gradle中的依赖版本与安装的Reanimated版本一致，且settings.gradle中的配置正确。

内容的提问来源于stack exchange，提问作者kristian goshi