Reanimated v2在React Native Web失效，如何配置Expo Webpack？

核心配置调整步骤 #

1. 修正Babel插件顺序 #

Reanimated的babel插件必须放在最后，否则会导致Web端动画解析异常。修改你的babel.config.js：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      // 其他Babel插件（如react-native-paper、dotenv等）放在这里
      'react-native-reanimated/plugin', // 必须是最后一个插件
    ],
  };
};

2. 合并Webpack配置 #

在自定义的webpack.config.js中，基于Expo的基础配置添加Reanimated所需的loader规则：

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function(env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  // 注入Reanimated的Babel loader处理
  config.module.rules.push({
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['babel-preset-expo'],
        plugins: ['react-native-reanimated/plugin'],
      },
    },
  });

  // 确保Web端文件扩展名优先级正确
  config.resolve.extensions = ['.web.js', '.js', '.json', '.web.ts', '.ts', '.web.tsx', '.tsx'];

  return config;
};

3. 缓存清理与验证 #

• 执行expo r -c清除项目缓存并重启开发服务器
• Web端硬刷新页面（Ctrl+Shift+R），避免浏览器缓存旧代码

额外排查点 #

• 确认已安装babel-plugin-react-native-web：执行npm install babel-plugin-react-native-web --save-dev
• 检查动画代码的Web兼容性：避免使用Reanimated中仅支持原生端的API，比如某些依赖原生UI组件的动画逻辑；优先使用useAnimatedStyle、Animated.View等跨端兼容的API
• 版本兼容性验证：运行npm ls react-native-reanimated，确保没有版本冲突，SDK47与Reanimated v2.11是官方兼容的

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