Expo/React Native项目依赖冲突：AsyncStorage及文件缺失问题求助

问题原因分析 #

1. AsyncStorage 报错 #

你未直接使用但触发报错，核心原因是某个间接依赖（如旧版 react-navigation、redux-persist、firebase 相关包）仍在引用 react-native 核心中已移除的 AsyncStorage。从 React Native 0.60+ 开始，AsyncStorage 已被剥离至独立包 @react-native-async-storage/async-storage，旧依赖未做适配就会触发该错误。

2. DrawerLayoutAndroid 文件找不到 #

同样是间接依赖适配问题：旧版抽屉导航类依赖（如旧版 react-navigation-drawer）仍在调用已被 RN/Expo 移除的 DrawerLayoutAndroid 组件。当前 Expo 推荐使用 @react-native-drawer-layout/drawer-layout 替代原生组件，旧依赖未适配则会出现文件缺失报错。

具体解决方案 #

步骤1：统一依赖版本适配 Expo 环境 #

Expo 项目的依赖版本必须与当前 Expo SDK 版本匹配，先确认 package.json 中 expo 的版本，再对应调整其他依赖：

• 若使用 Expo SDK 49+：
  • React Navigation 需用 6.x 版本，确保 @react-navigation/drawer 为最新 6.x 版本（已适配新抽屉组件）
  • Redux 相关依赖（如 redux-persist）用最新版，或手动指定其使用 @react-native-async-storage/async-storage 作为存储引擎
  • Firebase 需使用适配当前 SDK 的版本（如 SDK 49 对应 firebase 10.x+）

步骤2：强制替换 AsyncStorage 引用 #

在项目根目录创建/修改 metro.config.js，添加配置强制所有依赖使用独立版 AsyncStorage：

const { getDefaultConfig } = require('@expo/metro-config');

const config = getDefaultConfig(__dirname);

config.resolver.resolveRequest = (context, moduleName, platform) => {
  if (moduleName === 'react-native/Libraries/Storage/AsyncStorage') {
    return {
      filePath: require.resolve('@react-native-async-storage/async-storage'),
      type: 'sourceFile',
    };
  }
  return context.resolveRequest(context, moduleName, platform);
};

module.exports = config;

步骤3：替换抽屉组件依赖 #

若为 React Navigation 抽屉导致的问题，卸载旧依赖并安装新版适配包：

# 卸载旧版抽屉依赖（如有）
npm uninstall react-navigation-drawer
# 安装新版抽屉导航及适配包
npm install @react-navigation/drawer @react-native-drawer-layout/drawer-layout

步骤4：清理缓存并重装依赖 #

# 清除 npm 缓存
npm cache clean --force
# 删除 node_modules 和锁文件
rm -rf node_modules package-lock.json
# 用 Expo 命令安装适配版本的依赖
npx expo install
# 若仍有 peer 依赖冲突，使用以下命令
npm install --legacy-peer-deps
# 清除 Expo 缓存并重启项目
npx expo start --clear

步骤5：检查并修正 package.json 依赖 #

以下是 Expo SDK 49 环境下的兼容依赖示例，可对照调整：

{
  "dependencies": {
    "expo": "~49.0.15",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/drawer": "^6.6.6",
    "@react-native-async-storage/async-storage": "1.19.3",
    "redux": "^4.2.1",
    "react-redux": "^8.1.3",
    "redux-persist": "^6.0.0",
    "firebase": "^10.7.1"
  }
}

新手开发指导 #

• 优先使用 npx expo install 安装依赖，它会自动匹配当前 Expo SDK 的兼容版本，减少冲突概率
• 升级 Expo SDK 后，务必参照官方升级指南同步更新其他依赖
• 遇到间接依赖问题时，用 npm ls <依赖名> 命令定位调用源，比如 npm ls AsyncStorage 可找出哪个包在引用旧版 AsyncStorage
• 尽量选择官方维护的最新版依赖，避免使用停止维护的旧包

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