如何将React Native 0.66.3版本升级至0.70.6？

一、升级前准备 #

• 完整备份项目：执行git add . && git commit -m "pre-upgrade backup"并推送到远程仓库，避免升级过程中丢失代码。
• 检查依赖兼容性：列出项目中所有第三方原生模块（如react-native-camera、react-native-reanimated等），确认它们的最新版本支持React Native 0.70.6。若存在不兼容模块，先升级这些模块或寻找替代方案。
• 升级开发环境：确保Node.js版本≥14.0.0，npm≥6.0.0或yarn≥1.22.0，Android Gradle插件版本匹配0.70.6要求（Gradle 7.3.3），iOS Xcode版本≥13.4.1。

二、基于官方升级助手的手动升级（替代npx react-native upgrade） #

npx react-native upgrade命令在新版本RN中已逐步废弃，易引发冲突，建议使用官方升级助手进行差异对比升级：

1. 选择旧版本0.66.3和目标版本0.70.6，生成文件差异列表。
2. 逐一对比每个文件的差异：
   • 核心配置文件：重点处理package.json（更新react、react-native、@react-native-community/cli等依赖版本）、android/build.gradle、android/app/build.gradle、ios/Podfile、metro.config.js。
   • 缺失文件：若项目中存在0.70.6新增但本地没有的文件（如react-native.config.js或更新后的.gitignore），直接从升级助手的模板中复制内容创建对应文件。
3. 执行依赖安装：
   • 运行npm install或yarn install安装更新后的npm包。
   • Android端：进入android目录，执行./gradlew clean && ./gradlew assembleDebug清理并构建。
   • iOS端：进入ios目录，执行pod install --repo-update更新Pods。

三、Metro打包器错误修复 #

若构建成功但Metro报错，按以下常见场景排查：

1. 模块找不到错误 #

• 检查第三方库版本：使用npm ls <package-name>查看依赖版本，确保所有库已升级至支持RN 0.70.6的版本。若存在过时库，执行npm install <package-name>@latest升级。
• 清理缓存：执行npx react-native start --reset-cache重置Metro缓存。

2. Babel配置错误 #

• 确保babel.config.js使用RN 0.70.6的默认预设：

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

3. Metro配置错误 #

• 更新metro.config.js至0.70.6的标准配置：

  const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
  
  const config = {};
  
  module.exports = mergeConfig(getDefaultConfig(__dirname), config);
  

• 若项目有自定义资源（如字体、svg），需在config中添加对应的assetExts配置。

4. TypeScript类型错误（若使用TS） #

• 更新tsconfig.json中的compilerOptions，确保包含RN 0.70.6的类型定义，例如：

  {
    "compilerOptions": {
      "target": "esnext",
      "module": "commonjs",
      "lib": ["es2017"],
      "allowJs": true,
      "jsx": "react-native",
      "noEmit": true,
      "isolatedModules": true,
      "strict": true,
      "moduleResolution": "node",
      "allowSyntheticDefaultImports": true,
      "esModuleInterop": true,
      "skipLibCheck": true,
      "resolveJsonModule": true
    },
    "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
  }
  

• 修复代码中与RN新类型不兼容的地方。

四、后续验证 #

• 分别执行npx react-native run-android和npx react-native run-ios，确认应用能正常启动。
• 测试应用所有核心功能，排查是否存在升级导致的逻辑回归。
• 清理项目冗余文件，移除升级过程中不再需要的旧配置。

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