如何把现有网站变成原生App：Expo Skills的Web/React到iOS/Android迁移完全指南

如何把现有网站变成原生App：Expo Skills的Web/React到iOS/Android迁移完全指南

【免费下载链接】skillsA collection of AI agent skills for working with Expo projects and Expo Application Services项目地址: https://gitcode.com/GitHub_Trending/skills9/skills

Expo Skills是 Expo 官方团队推出的 AI Agent 技能集合，能指挥 AI 编程助手把你现有的网站（Next.js、Vite、CRA 等 React 项目）逐屏迁移为原生 iOS/Android App——不需要推倒重写。本文将带你完整走完从安装、评估到上架的每一步。

为什么网站不能直接"转成"App？

很多开发者的第一反应是：有没有一个"转换器"能一键把网站变成 App？

答案是：没有转译器。Web 应用无法自动"转换"为原生应用，只能迁移——像绞杀榕一样，围绕老树长出新树，逐渐替代它：

• 先搭好一个原生外壳；
• 第一天就让整个 Web 界面在外壳里跑起来（立刻可用）；
• 然后按价值优先级，一屏一屏地改成真正的原生实现。

这个理念来自 expo-web-to-native 技能，它是整个迁移过程的"主线"，每一步都会自动调起其他专门的 Expo 技能来干活。

准备工作：安装 Expo Skills 的3种方式

根据你的 AI 编程工具选择安装路径（详见 README）：

# 通用安装命令：装下全部 Expo 技能 npx skills@latest add expo/skills --skill '*'

安装完成后重启 AI 会话，让它发现新技能即可。如果你还想直接浏览技能源码，可以 clone 仓库查看：

git clone https://gitcode.com/gh_mirrors/skills9/skills

💡 提示：技能只是"教会 AI 怎么做"，Expo 官方文档和 CLI 始终是唯一权威来源。

迁移六步走：Expo Skills 的核心流程

技能把迁移拆成了六个阶段，每一步结束应用都可发布（见 SKILL.md 流程图）：

第1步：盘点家底，写出工作清单

先让 AI 通读你的仓库，产出一份migration-progress.md工作清单，做两件事：

• 分清前台与后台：页面路由（page.tsx）是要迁移的"屏幕"；服务端路由、ORM、登录逻辑留在服务器端；
• 给每屏分桶：原样搬运（直接塞进 WebView）、优先原生化（高频热屏）、以后再说、或混合模式。

⚠️ 特别注意第三方服务：浏览器 SDK 无法直接搬用，尤其是数字商品支付——Apple 和 Google 强制要求走应用内购买（IAP，抽成约15–30%），这是评估期就要拍板的商业模式决策，而不是上架审核前才想起来。

第2步：搭好原生外壳

用create-expo-app创建 Expo 项目，然后用Expo Router的文件式路由镜像你网站的路由结构——Next.js 的路由树几乎可以 1:1 对应（比如[id]/page.tsx→[id].tsx）。此时每屏还只是一个空壳。

第3步：DOM 组件外壳——第一天的里程碑 🔑

这是最神奇的一步：把每个屏幕原样搬成DOM 组件（文件顶部加一行'use dom'），由原生路由渲染。于是整个 App 第一天就能在手机上完整运行——甚至可以直接提交 TestFlight 内测！

DOM 组件的运行机制（含规则与写法）见 expo-dom 技能：iOS 上跑在 WKWebView 里、Android 上跑在 WebView 里、Web 端原样渲染，recharts、代码高亮等纯 Web 库可以不改直接用。

第4步：按价值"绞杀"屏幕，一屏一屏原生化

沿着工作清单从上往下走，对每个热屏做重新设计（不是照搬网页布局）：

• 首选@expo/ui——它渲染的是真正的 SwiftUI / Jetpack Compose，观感与苹果、谷歌自家 App 一致；
• 配合Expo Router的平台级导航（底部 NativeTabs、大标题折叠）；
• 加上移动端交互：滑动、触觉反馈、惯性滚动；
• 只有在自定义布局时才退回普通 React Native 组件。

每个 DOM 屏幕都带约 2MB 的 Web 运行时，所以只把高价值屏幕原生化，其余留在 WebView 里——这就是"按价值绞杀"。

第5步：接通数据、登录与存储

Web 数据层无法原封不动地搬过去：相对路径请求、Cookie 会话、localStorage全部要换。用expo-data-fetching技能处理请求与缓存，后端迁移到 EAS Hosting 时再启用eas-hosting。

第6步：上架发布

用eas-app-stores技能构建并提交 App Store / Google Play / TestFlight（详见 eas-app-stores 技能），之后用EAS Update做 OTA 热更新，改 bug 不用等审核。

避开"假朋友"：Web 概念到原生的关键映射

技能把最常见的坑整理成了一张"假朋友"对照表（false-friends.md）——那些"看着能直接用、实际会翻车"的 Web 习惯。新手重点记住这六条：

完整对照表覆盖事件、布局、导航、网络、第三方 SDK 等全部类别，迁移过程中可以随时查阅。

原生感设计：重构而非换皮

技能强调一个朴素检验标准：如果原生页面的截图能冒充你的网页版，说明你只是换了层皮。判断一个设计是否"原生"，对照 native-patterns.md 的映射表：

• 顶部导航条 →底部 NativeTabs（iOS 26 还有液态玻璃效果）
• 弹窗 / Modal →BottomSheet 底部抽屉
• 下拉菜单<select>→ 原生Picker 滚轮
• 下拉刷新、触觉反馈、大标题滚动折叠——这些"手感"是截图截不出来的，需要实际跑起来感受

同时牢记：用运行来验证，而不是用编译来验证。构建通过只能证明代码能打包，一个空白 WebView 同样能编译通过；正确做法是让 AI 同时打开 Web 原版和原生版同一路由，对比内容与行为是否一致（而不是像素级对比——原生化之后本就该看起来更原生）。

让 AI 自动跑完迁移：目标循环玩法

迁移本质是一个"直到做完为止"的重复循环，技能提供了一份即填即用的目标循环模板（run-as-goal.md）：

1. 把模板里的 App 名称和 API 地址填好；
2. 用 AI 助手的 goal 命令启动（或写入migration-goal.md手动启动）；
3. 每一轮 AI 会重新读取技能手册，取工作清单顶部未完成的一屏 → 重设计 → 真机验证 → 打勾，直到清单清空。

一次一屏、全程可构建、卡住的项标记后跳过不空转——整个过程可以无人值守跑完。

关键文件速查

小结

把网站变成原生 App 不必豪赌式重写：Expo Skills 让你第一天就能在手机上跑起整个网站，之后再一屏一屏地把它变成真正的原生应用。装上技能、喂给 AI、跑起目标循环——剩下的就是看着清单上的勾一个个被画掉。🚀

【免费下载链接】skillsA collection of AI agent skills for working with Expo projects and Expo Application Services项目地址: https://gitcode.com/GitHub_Trending/skills9/skills