新手求助：如何在expo-cli中运行react-cli项目？

一、前期准备 #

• 确认本地已安装 node.js 和 npm/yarn
• 全局安装 Expo CLI：npm install -g expo-cli 或 yarn global add expo-cli
• 从 GitHub 下载目标 React CLI 项目，解压到本地单独文件夹

二、创建全新 Expo 项目 #

• 执行命令创建基础项目：expo init my-expo-project
• 选择 blank 空白模板（新手友好）
• 进入项目目录：cd my-expo-project

三、核心文件迁移（仅复制必要内容） #

• 业务组件：将原项目 src/components 下的组件复制到 Expo 项目的 components 文件夹（无则新建）
• 页面文件：原项目的页面文件复制到 Expo 项目的 screens 文件夹（无则新建）
• 静态资源：图片、字体等资源复制到 Expo 项目的 assets 文件夹
• 样式文件：CSS/SCSS/Styled Components 相关文件复制到对应位置，注意移除 web 端全局样式（如 body 样式），后续改为 Expo 全局配置

四、依赖适配与安装 #

React CLI 依赖多数和 Expo 不兼容，需逐一调整：

• 替换路由依赖：原项目的 react-router-dom 换成 Expo 官方的 expo-router，执行 npm install expo-router
• 通用库（如 axios、lodash）直接安装：npm install axios lodash
• UI 组件库选择支持 Expo 的版本（如 react-native-elements），替换 web 端组件库
• 执行 npm install 后，再运行 npx expo install 自动适配 Expo 专属依赖版本

五、代码适配调整（关键步骤） #

React CLI 是 web 环境，Expo 基于 React Native，需修改不兼容代码：

• 替换 web 专属 API：移除 window、document 这类浏览器 API，改用 Expo/React Native 对应实现（如用 Dimensions 获取屏幕尺寸）
• 替换基础组件：<div>→<View>、<p>→<Text>、<img>→<Image>（推荐用 expo-image）
• 重构路由逻辑：按照 Expo Router 规则调整路由，用其 Link 组件替换原路由链接
• 调整入口文件：将原项目的入口逻辑迁移到 Expo 的 App.js 或 app/_layout.js（使用 expo-router 时），替换默认代码

六、启动与问题排查 #

• 执行 npm start 或 expo start 启动项目
• 报错时优先查看终端提示：
  • 依赖问题：用 npm ls [依赖名] 检查版本兼容性，重新安装对应版本
  • 代码问题：根据报错定位文件，修改不兼容的语法或 API
  • 资源问题：确认资源路径正确，所有静态资源需放在 assets 文件夹内

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