Expo Web 转原生迁移指南
将现有 React 网站逐屏迁移为可发布的 Expo 原生应用。
技能明确迁移范围、后端边界和相对路径限制,未发现恶意代码、凭据窃取或隐蔽外传;但要求安装全局 npm 工具、调用浏览器/模拟器及可能的 EAS 服务,并鼓励目标循环无人值守,缺少逐步确认、权限最小化、数据流说明、回滚方案和失败后的安全恢复,因此扣除11分。
步骤顺序、引用文件和验证流程基本一致,涵盖 DOM 外壳、原生化、数据层与发布;但仅有文档,没有提交测试或可复现执行证据,依赖 agent-browser、argent、Expo SDK 及其他技能,异常输入、工具缺失和安装失败的诊断反馈较薄,因此扣除11分,并受静态上限限制。
明确面向已有 Next.js、Vite 或 CRA React 应用,并说明不适用于全新原生项目;触发条件和非适用范围较清楚,但未提供中文交互支持,工具链和部分服务的中国大陆可达性未说明,且对不同项目、平台和后端约束的边界证据有限,因此扣除5分。
SKILL.md 采用渐进式结构,提供 false-friends、native-patterns、设备验证和目标循环等引用;有名称、1.0.0 版本和 MIT 许可,仓库还提供版本检查 CI,但技能未明确维护负责人、更新路径、变更记录、依赖版本或系统化 FAQ,因此扣除6分。
该技能提供从评估、DOM 壳到逐屏原生化和验证的可操作主线,映射表可直接辅助迁移决策;但核心结果依赖多个外部技能、项目实际配置、运行中的双端应用和未提供的后端/认证环境,静态材料无法证明最终产物可直接使用,因此扣除9分,并受静态上限限制。
证据主要是版本固定的技能文档、引用文件和仓库 CI 维护检查,能审计主要主张;但没有覆盖关键路径的测试、真实执行记录或多来源独立复核,外部 Expo 文章仅作为链接引用,因此扣除6分,并受静态上限限制。
- 仅基于源文件静态审查,未执行迁移、安装工具或验证 iOS/Android 行为。
- 全局安装 agent-browser 和 argent、使用模拟器及目标循环可能产生外部状态变化;应由用户确认权限、网络、认证和回滚策略。
- 文档未说明中文支持或中国大陆网络可达性,且大量依赖其他 Expo 技能和项目环境。
- 关于 SDK 56、@expo/ui、DOM 组件及商店支付政策的时效性和适用性未在本材料中独立验证。
这个 Skill 能做什么,适合哪些场景?
这是 Expo 官方技能集合中的一个开源技能,专门指导将 Next.js、Vite 或 CRA React 应用迁移到 iOS 和 Android。它采用渐进式迁移:先搭建 Expo 原生壳并通过 DOM 组件运行完整 Web 界面,再按业务价值逐屏改造成原生界面。指南覆盖路由映射、后端边界、数据与认证迁移、原生重设计以及设备运行验证。它适合已有 Web React 应用的团队,不适合仅从零构建原生应用的场景。
读取现有 Web 项目的路由、页面、服务端路由、数据获取方式、认证、样式和第三方 SDK,生成并维护 migration-progress.md 工作清单;使用 create-expo-app 搭建 Expo 壳,并将 Web 路由映射到 Expo Router;指导使用 DOM 组件先运行完整 Web UI,再使用 @expo/ui、Expo Router 和 React Native 原语逐屏原生化;指导使用 expo-data-fetching、EAS Hosting 和 eas-app-stores 处理数据、托管与发布;要求使用 agent-browser 检查 Web 原版,并使用 argent 驱动原生模拟器,对比内容和行为。
- 已有 Next.js 应用、希望先发布移动端版本再逐步原生化的团队。
- 维护 Vite 或 CRA React 项目、需要将页面按优先级迁移到 iOS 和 Android 的开发者。
- 希望保留低价值页面为 DOM 界面、只将高频或依赖手势和键盘的页面改为原生界面的产品团队。
- 需要评估服务端路由、Cookie 会话、localStorage、环境变量或浏览器 SDK 如何迁移到移动端的工程师。
这个 Skill 有哪些优点和局限?
- 提供从评估到商店发布的完整迁移顺序,而不是只讲单个 API。
- 明确区分页面与后端,并支持逐屏、持续可发布的迁移方式。
- 包含 Web 与原生在路由、DOM、CSS、数据、认证、存储和第三方 SDK 方面的迁移提示。
- 强调运行时验证,并指定 agent-browser 与 argent 的对比流程。
- 依赖已有 Web React 项目;从零构建原生应用时,指南建议直接使用 expo-router。
- 每个 DOM 页面约携带 2 MB Web 运行时,完整保留为 DOM 可能增加体积。
- 若 agent-browser 或 argent 未安装,指南要求先安装,安装步骤本身未在该 SKILL.md 中展开。
- 源码未记录测试套件、支持平台矩阵或实际迁移成功案例。
如何安装这个 Skill?
安装整个 Expo Skills 集合:运行 npx skills@latest add expo/skills --skill '*',然后按提示选择安装位置并重启或刷新 Agent 会话。Codex 用户也可以运行 codex plugin add expo@openai-curated 安装官方插件。源码没有提供单独安装 expo-web-to-native 技能的完整独立命令。
如何使用这个 Skill?
在已安装技能的 Agent 中提出例如:把这个现有的 Next.js React 应用逐步迁移为 Expo iOS/Android 应用,先评估路由并生成 migration-progress.md,再搭建 DOM 组件壳。 按指南先完成评估、搭壳和 DOM 组件阶段,然后逐屏原生化并在 Web 原版与原生模拟器之间验证内容和行为。
这个 Skill 与同类方案有什么区别?
相较于一次性重写,该技能明确采用渐进式迁移:先让整个 Web UI 在原生壳中运行,再按价值逐屏原生化。相较于仅使用 DOM 组件,它还要求将高价值页面重新设计为符合 iOS/Android 习惯的原生界面。