如何彻底移除Expo并迁移至纯React Native CLI环境？

前置准备 #

• 完整备份项目（复制到独立文件夹，避免操作失误丢失代码）
• 确认Expo SDK 47对应的React Native版本：0.70.5，后续所有依赖版本需匹配该RN版本

步骤1：清除所有Expo相关依赖与配置 #

1. 编辑package.json，删除以下类型的依赖：
   • expo、@expo/*（如@expo/config-plugins、@expo/vector-icons）
   • eas-cli、expo-cli
   • 所有Expo专属模块（如expo-image-picker、expo-splash-screen）
2. 删除项目根目录下的Expo专属文件：
   • app.json/app.config.js
   • expo-env.d.ts
   • eas.json
3. 执行npm install或yarn install更新依赖

步骤2：搭建React Native CLI基础结构 #

1. 确保本地已配置RN CLI所需环境（Node、Android SDK、Xcode等）
2. 在项目根目录创建RN CLI入口文件index.js，内容如下：

   import { AppRegistry } from 'react-native';
   import App from './App';
   import { name as appName } from './package.json';
   
   AppRegistry.registerComponent(appName, () => App);
   

3. 更新package.json的scripts字段，替换为RN CLI命令：

   "scripts": {
     "start": "react-native start",
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "test": "jest"
   }
   

4. 安装匹配版本的RN核心依赖：

   npm install react@18.1.0 react-native@0.70.5 --save-exact
   

步骤3：迁移代码并替换Expo模块 #

1. 遍历项目代码，替换所有Expo专属API：
   • expo-status-bar → React Native内置StatusBar组件
   • expo-image-picker → react-native-image-picker
   • expo-splash-screen → react-native-splash-screen或原生配置启动页
   • @expo/vector-icons → react-native-vector-icons
2. 删除所有import { ... } from 'expo'的语句

步骤4：生成纯净原生项目文件夹 #

1. 删除此前用expo prebuild生成的ios和android文件夹
2. 临时创建一个匹配版本的RN CLI项目，提取原生文件夹：

   npx react-native init --version 0.70.5 TempRNProject
   

3. 将TempRNProject中的ios和android文件夹复制到你的项目根目录
4. 根据需求修改ios/<项目名>/Info.plist和android/app/src/main/AndroidManifest.xml，添加对应权限（如相机、存储）

步骤5：处理第三方原生库与Gradle问题 #

1. 安装第三方原生库时，遵循RN CLI标准流程：

   npm install <目标库名>
   # iOS需执行pod安装
   npx pod-install ios
   

2. 按库的官方文档配置原生文件（如修改android/build.gradle、iOS/Podfile）
3. 修复Gradle SDK未定义异常：
   打开android/build.gradle，确保ext块配置符合RN 0.70.5要求：

   ext {
     buildToolsVersion = "33.0.0"
     minSdkVersion = 21
     compileSdkVersion = 33
     targetSdkVersion = 33
     ndkVersion = "25.1.8937393"
   }
   

   删除所有Expo遗留的Gradle插件引用

步骤6：测试验证 #

1. 启动Metro服务器：npm start
2. 运行Android项目：npm run android
3. 运行iOS项目：npm run ios
4. 测试所有功能，确保原生模块正常工作，无编译错误

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