如何把现有网站变成原生AppExpo 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/skillsExpo 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你使用的工具推荐安装方式Claude Code / Codex插件市场安装后续自动更新Cursor、OpenCode、Copilot、Windsurf、Gemini 等skills CLI 一条命令搞定# 通用安装命令装下全部 Expo 技能 npx skillslatest 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 习惯。新手重点记住这六条Web 写法原生对应坑在哪里localStorageexpo-sqlite垫片引入一行垫片代码后旧代码可直接跑但sessionStorage没有对应物onClickonPress触屏世界没有 click也没有 hoverfetch(/api/x)相对路径必须写绝对 URL原生的 App 没有源站概念相对路径直接失败Cookie 会话登录expo-secure-store 请求头令牌没有浏览器 Cookie 罐要围绕 Bearer Token 重新设计div、pView、Text所有文字必须包在Text里裸字符串会直接报错className/ CSS 文件StyleSheet.create或 NativeWind样式不继承且 flex 默认方向是竖向完整对照表覆盖事件、布局、导航、网络、第三方 SDK 等全部类别迁移过程中可以随时查阅。原生感设计重构而非换皮技能强调一个朴素检验标准如果原生页面的截图能冒充你的网页版说明你只是换了层皮。判断一个设计是否原生对照 native-patterns.md 的映射表顶部导航条 →底部 NativeTabsiOS 26 还有液态玻璃效果弹窗 / Modal →BottomSheet 底部抽屉下拉菜单select→ 原生Picker 滚轮下拉刷新、触觉反馈、大标题滚动折叠——这些手感是截图截不出来的需要实际跑起来感受同时牢记用运行来验证而不是用编译来验证。构建通过只能证明代码能打包一个空白 WebView 同样能编译通过正确做法是让 AI 同时打开 Web 原版和原生版同一路由对比内容与行为是否一致而不是像素级对比——原生化之后本就该看起来更原生。让 AI 自动跑完迁移目标循环玩法迁移本质是一个直到做完为止的重复循环技能提供了一份即填即用的目标循环模板run-as-goal.md把模板里的 App 名称和 API 地址填好用 AI 助手的 goal 命令启动或写入migration-goal.md手动启动每一轮 AI 会重新读取技能手册取工作清单顶部未完成的一屏 → 重设计 → 真机验证 → 打勾直到清单清空。一次一屏、全程可构建、卡住的项标记后跳过不空转——整个过程可以无人值守跑完。关键文件速查资料路径项目总览与安装说明README.md端到端迁移主线技能plugins/expo/skills/expo-web-to-native/SKILL.mdWeb→原生习惯对照表references/false-friends.mdUX 模式重设计手册references/native-patterns.md真机验证配方references/verify-on-device.md目标循环模板references/run-as-goal.mdDOM 组件机制详解plugins/expo/skills/expo-dom/SKILL.md上架商店构建plugins/expo/skills/eas-app-stores/SKILL.md路由导航技能plugins/expo/skills/expo-router/SKILL.md小结把网站变成原生 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/29 10:50:55 · 阅读 1.2k 如何把现有网站变成原生App：Expo Skills的Web/React到iOS/Android迁移完全指南
如何把现有网站变成原生AppExpo 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/skillsExpo 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你使用的工具推荐安装方式Claude Code / Codex插件市场安装后续自动更新Cursor、OpenCode、Copilot、Windsurf、Gemini 等skills CLI 一条命令搞定# 通用安装命令装下全部 Expo 技能 npx skillslatest 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 习惯。新手重点记住这六条Web 写法原生对应坑在哪里localStorageexpo-sqlite垫片引入一行垫片代码后旧代码可直接跑但sessionStorage没有对应物onClickonPress触屏世界没有 click也没有 hoverfetch(/api/x)相对路径必须写绝对 URL原生的 App 没有源站概念相对路径直接失败Cookie 会话登录expo-secure-store 请求头令牌没有浏览器 Cookie 罐要围绕 Bearer Token 重新设计div、pView、Text所有文字必须包在Text里裸字符串会直接报错className/ CSS 文件StyleSheet.create或 NativeWind样式不继承且 flex 默认方向是竖向完整对照表覆盖事件、布局、导航、网络、第三方 SDK 等全部类别迁移过程中可以随时查阅。原生感设计重构而非换皮技能强调一个朴素检验标准如果原生页面的截图能冒充你的网页版说明你只是换了层皮。判断一个设计是否原生对照 native-patterns.md 的映射表顶部导航条 →底部 NativeTabsiOS 26 还有液态玻璃效果弹窗 / Modal →BottomSheet 底部抽屉下拉菜单select→ 原生Picker 滚轮下拉刷新、触觉反馈、大标题滚动折叠——这些手感是截图截不出来的需要实际跑起来感受同时牢记用运行来验证而不是用编译来验证。构建通过只能证明代码能打包一个空白 WebView 同样能编译通过正确做法是让 AI 同时打开 Web 原版和原生版同一路由对比内容与行为是否一致而不是像素级对比——原生化之后本就该看起来更原生。让 AI 自动跑完迁移目标循环玩法迁移本质是一个直到做完为止的重复循环技能提供了一份即填即用的目标循环模板run-as-goal.md把模板里的 App 名称和 API 地址填好用 AI 助手的 goal 命令启动或写入migration-goal.md手动启动每一轮 AI 会重新读取技能手册取工作清单顶部未完成的一屏 → 重设计 → 真机验证 → 打勾直到清单清空。一次一屏、全程可构建、卡住的项标记后跳过不空转——整个过程可以无人值守跑完。关键文件速查资料路径项目总览与安装说明README.md端到端迁移主线技能plugins/expo/skills/expo-web-to-native/SKILL.mdWeb→原生习惯对照表references/false-friends.mdUX 模式重设计手册references/native-patterns.md真机验证配方references/verify-on-device.md目标循环模板references/run-as-goal.mdDOM 组件机制详解plugins/expo/skills/expo-dom/SKILL.md上架商店构建plugins/expo/skills/eas-app-stores/SKILL.md路由导航技能plugins/expo/skills/expo-router/SKILL.md小结把网站变成原生 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考