React Native报错Unable to resolve module ./reanimated1如何解决

这个报错的核心原因是react-native-reanimated库的Babel编译插件未配置，导致Metro打包时无法识别库内的模块路径，按以下步骤操作即可解决：

1. 配置Babel插件 #

打开项目根目录下的babel.config.js文件，添加reanimated专属的Babel插件，修改后的完整配置参考如下：

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

2. 清除缓存重新构建 #

Metro默认会缓存旧的依赖解析结果，必须清理缓存后新配置才会生效，按顺序执行以下操作：

• 关闭当前正在运行的Metro服务终端
• 执行命令重启Metro并清除缓存：npx react-native start --reset-cache
• 新开一个终端，重新编译安装应用：
  • 安卓端执行：npx react-native run-android
  • iOS端执行：npx react-native run-ios

异常兜底方案 #

如果执行完上述步骤还是报错，可执行以下命令完全重置依赖和构建缓存后再重试：

# 删除依赖目录重新安装
rm -rf node_modules package-lock.json
npm install
# 安卓端额外清理构建缓存
cd android && ./gradlew clean && cd ..

你当前使用的react-navigation 4.x版本与react-native-reanimated@1.9.9版本兼容，不需要升级reanimated到2.x版本，避免产生额外的兼容问题。

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