Expo创建RN项目安装react-native-reanimated报需额外loader错误问询

react-native-reanimated在Expo项目中必须完成额外配置，未按要求配置就会触发"You may need an additional loader to handle the result of these loaders when using react-native-reanimated"报错，具体配置流程如下：

• 安装版本适配的依赖
  不要直接通过npm/yarn安装最新版react-native-reanimated，版本与当前Expo SDK不兼容是高频报错原因。在项目根目录执行Expo官方依赖安装命令，会自动拉取适配当前SDK版本的安装包：

  npx expo install react-native-reanimated
  

• 配置Babel插件
  打开项目根目录的babel.config.js文件，在plugins数组的最后一项添加react-native-reanimated/plugin，插件放置顺序错误同样会触发报错，参考正确配置：

  module.exports = function(api) {
    api.cache(true);
    return {
      presets: ['babel-preset-expo'],
      plugins: [
        // 其余自定义插件全部放在该位置上方
        'react-native-reanimated/plugin'
      ],
    };
  };
  

• 清除缓存重启服务
  Babel配置修改后必须清除缓存才能生效，先按Ctrl+C停掉当前运行的Expo服务，再执行带清缓存参数的启动命令：

  npx expo start --clear
  

• 自定义开发构建额外操作
  如果你使用的是自定义Expo开发构建（Dev Client）而非官方Expo Go，完成上述步骤后需要重新构建开发客户端，原生模块改动需要重新打包才能生效：

  # 云端构建开发包示例
  eas build --profile development --platform android
  # 本地构建示例
  npx expo prebuild
  npx expo run:android # 安卓端命令，iOS端替换为run:ios
  

报错参考截图 #

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