Expo项目中使用react-native-reanimated动画组件报错求助

云原生阿岚

2026-8-13

解决Expo中Animated.View搭配Bounce动画的报错问题

1. 对齐依赖版本

Expo项目中react-native-gesture-handler和react-native-reanimated的版本必须与当前Expo SDK适配，不要手动安装独立版本。执行以下命令让Expo自动安装匹配版本：

npx expo install react-native-gesture-handler react-native-reanimated

2. 修正Babel配置

确保babel.config.js中Reanimated插件放在所有插件最前面，配置示例：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'react-native-reanimated/plugin',
      // 其他插件放在此处之后
    ],
  };
};

3. 强制导入顺序

把react-native-gesture-handler的导入放在所有代码最顶部，包括React之前：

// App.tsx 第一行
import 'react-native-gesture-handler';
import React from 'react';
import Animated, { BounceIn, BounceOut } from 'react-native-reanimated';

4. 清除缓存重启项目

缓存异常会导致模块注册失败，执行以下操作：

关闭当前Expo开发服务器
运行命令清除缓存并重启：

npx expo start --clear

若使用Android模拟器，可进入「设置→应用→Expo Go→存储」点击「清除数据」

5. 验证动画组件用法

确保动画组件使用方式正确，示例：

export default function App() {
  return (
    <Animated.View
      entering={BounceIn}
      exiting={BounceOut}
      style={{ width: 100, height: 100, backgroundColor: '#ff4444' }}
    />
  );
}