如何将 Rork 导出到 Xcode:完整步骤指南
Rork 底层是 Expo,所以导出到 Xcode 不是「转换」,而是用 prebuild 把项目还原成标准 iOS 原生工程。
TL;DR
想把 Rork 项目导出到 Xcode,核心思路很简单:Rork 生成的是 React Native(Expo)代码,你先把代码导出到本地,再用 npx expo prebuild 生成原生的 ios 文件夹,然后在 Xcode 里打开 workspace 即可。这不是「转换」,而是把 Expo 项目还原成标准 iOS 工程。如果希望导出的项目从一个真实、干净的设计开始,最好先用一个免费的 VP0 设计,让 Claude Code 或 Cursor 在它基础上生成代码。
想把 Rork 项目导出到 Xcode,核心思路其实很简单:Rork 生成的是 React Native(Expo)代码,你先把代码导出到本地,再用 npx expo prebuild 生成原生的 ios/ 文件夹,然后在 Xcode 里打开那个 workspace 就可以了。整个过程不是「转换」,而是把 Rork 给你的 Expo 项目还原成一个标准的原生 iOS 工程。如果你希望导出后的项目从一个真实、干净的设计开始,最好的起点是先用一个免费的 VP0 设计,让 Claude Code 或 Cursor 在它的基础上生成代码,这样导出的工程结构清晰、好维护。
很多人卡在导出这一步,是因为不清楚 Rork、Expo 和 Xcode 三者的关系。下面我们一步步讲清楚:什么时候需要导出、具体怎么做、用 EAS 还是本地 Xcode,以及常见的报错怎么解决。
如何把 Rork 项目导出到 Xcode?
简单说就是三步:导出代码,生成原生工程,在 Xcode 中打开。Rork 在底层用的是 Expo,所以它生成的项目和任何 Expo 项目一样,可以被还原成一个完整的 iOS 原生工程。你先从 Rork 把源码导出或下载到本地,运行 npm install 装好依赖,再用 npx expo prebuild 生成 ios/ 目录,最后用 Xcode 打开 .xcworkspace 文件。
这里要理解一点:Rork 不是一个黑盒,它给你的就是标准的 React Native 代码,所以导出到 Xcode 本质上是 Expo 的标准流程,而不是 Rork 独有的魔法。把这一点想通,后面每一步都会顺很多。如果你想看从 AI 工具直接导出 React Native 源码的更多做法,可以参考直接导出 React Native 源码的指南。
为什么要导出到 Xcode?
因为有些事情只能在原生工程里做。Rork 和 Expo 的在线环境足够做原型和大部分功能,但当你需要接入某个原生模块、添加自定义原生代码、配置推送证书,或者最终把 App 提交到 App Store 时,你就需要一个真正的 Xcode 工程。Apple 的 Xcode 文档里讲的签名、构建和提交流程,都是在原生工程上进行的。
所以导出不是为了「逃离」Rork,而是为了在需要的时候拥有完全的控制权。你可以在 Rork 里快速搭好界面和逻辑,再在需要原生能力或上架时导出到 Xcode 继续。这种「先快后稳」的节奏,对大多数项目都合适。
详细导出步骤
整个流程是标准的 Expo prebuild 流程,按顺序来就不会乱。
- 导出源码:在 Rork 里把项目代码导出或下载到本地,得到一个完整的 React Native(Expo)项目文件夹。
- 安装依赖:进入项目目录,运行
npm install,把所有依赖装好。 - 生成原生工程:运行
npx expo prebuild,Expo 会根据你的配置生成ios/(和android/)文件夹,这一步把托管项目变成了带原生代码的工程。 - 安装 Pod:进入
ios/目录运行pod install,装好原生依赖(新版本的 prebuild 通常会自动做这一步)。 - 打开 Xcode:用 Xcode 打开
ios/里的.xcworkspace文件,注意是 workspace 而不是.xcodeproj。 - 配置签名并运行:在 Xcode 的 Signing & Capabilities 里选好你的 Apple 开发者团队,然后选一个模拟器或真机运行。
Expo 的文档对 prebuild 有完整说明。关键是记住:导出之后这就是一个普通的 iOS 工程,你平时怎么用 Xcode,现在就怎么用。
用 EAS Build 还是本地 Xcode?
两条路都能把 Rork 项目变成可安装的 App,选哪条取决于你是否需要本地原生控制。
| 方式 | 适合场景 | 注意点 |
|---|---|---|
| 本地 Xcode(prebuild) | 需要改原生代码、加原生模块、本地调试 | 要装好 Xcode 和证书,本地环境略重 |
| EAS Build(云端构建) | 不想配本地环境,直接出安装包 | 在云端构建,原生代码不在你手边改 |
如果你只是想拿到一个能装到手机上的包,或者不想折腾本地环境,EAS Build 在云端构建会更省事。但如果你要修改原生代码、调试原生层,或者深度集成某个 SDK,本地 Xcode 才是你需要的。很多人是两者结合:平时用 EAS 出包,需要动原生时再 prebuild 到本地。先想清楚你这一步要做什么,再选方式。
用 AI 和真实设计加速
AI 工具能帮你在导出的代码上继续开发,但前提是项目结构本身要干净。导出后的工程如果界面是从一个含糊的提示词里硬生成的,往往结构混乱,Claude Code 或 Cursor 接手时也容易出错。反过来,如果项目从一个真实设计开始,模型就有清晰的结构可以跟着走。
这正是先用 VP0 设计的好处。VP0 的每个设计都有一个机器可读的 source page,Claude Code、Cursor 或 Rork 可以直接读取,所以生成的界面是按真实布局来的,而不是靠猜。你可以先在 VP0 里挑一个接近的设计,让 AI 在它的基础上生成 React Native 代码,再按上面的步骤导出到 Xcode。想在一个周末就搭好并上线,可以看周末搭好并上线 App 的模板,而免费的 iOS 设计可以在免费 iOS 移动 UI 模板下载里找到。
常见报错和解决办法
导出到 Xcode 时,几个错误特别常见。第一个是 expo prebuild 失败,通常是 app.json 或 app.config.js 里的配置有问题,比如 bundle identifier 没填或写错,先检查配置再重试。第二个是签名错误,在 Xcode 里没选开发者团队,或者证书没配好,到 Signing & Capabilities 里选对团队就能解决。
第三个是 pod install 报错,多半是 CocoaPods 版本太旧或者网络问题,更新 CocoaPods 再装一次通常就好。第四个是依赖装不上,先确认 npm install 真的成功了,再做 prebuild。最后一个常见问题是打开了 .xcodeproj 而不是 .xcworkspace,结果原生依赖找不到,记得一定打开 workspace。把配置、签名、Pod 这三块理顺,大部分报错都能解决。
什么时候不需要导出?
不是每个项目都需要导出到 Xcode。如果你只是在做原型、内部测试,或者用 Expo Go、EAS 就能满足构建和分发需求,那就没必要急着 prebuild 到本地,因为本地原生工程要维护证书和环境,是额外的负担。在不需要原生能力的阶段,留在 Rork 和 Expo 的托管流程里反而更轻。
导出真正有价值的时刻,是你需要原生模块、要做原生调试,或者准备正式上架 App Store 的时候。在那之前,让项目尽量留在托管环境里,能省下不少配置时间。按你当前真正要做的事来决定,而不是一上来就导出。
要点总结:把 Rork 导出到 Xcode
记住整体思路:Rork 给你的是 Expo 代码,导出就是标准的 prebuild 流程。先导出源码,npm install,再 npx expo prebuild 生成 ios/,然后用 Xcode 打开 .xcworkspace,配好签名就能运行。需要原生能力或上架时再导出,之前尽量留在托管环境里。本地 Xcode 适合改原生和调试,EAS 适合省心出包。让项目从一个真实设计开始,导出后的工程会干净很多。请人定制一套原生工程可能要花 $5,000 以上,而从一个免费的 VP0 设计开始,界面这一块不花一分钱。
你可以浏览 VP0 设计,让导出的项目从一个真实布局开始,而不是一张白屏。
常见问题
如何把 Rork 项目导出到 Xcode?
三步:先从 Rork 把源码导出到本地并 npm install,再运行 npx expo prebuild 生成原生的 ios/ 文件夹,最后用 Xcode 打开 .xcworkspace 并配好签名。因为 Rork 底层是 Expo,所以这就是标准的 Expo prebuild 流程,没有什么特殊魔法。如果想让导出的工程结构干净,建议先用一个免费的 VP0 设计,让 Claude Code 或 Cursor 在它基础上生成代码,再导出。
导出到 Xcode 后还能继续用 Rork 吗?
可以,但要理解一旦你 prebuild 生成了 ios/ 目录并在 Xcode 里改了原生代码,再回到托管流程就要小心,因为你的改动在原生层。常见做法是:界面和业务逻辑尽量在 React Native 代码里改,原生层的改动单独记录好。如果你还没动原生代码,随时可以删掉 ios/ 重新 prebuild。先想清楚哪些改动在 JS 层、哪些在原生层,协作就不会乱。
用 EAS Build 还是本地 Xcode 更好?
看你要做什么。只想拿到能安装的包、又不想配本地环境,就用 EAS 在云端构建。需要改原生代码、加原生模块或本地调试,就 prebuild 到本地用 Xcode。两者可以结合:平时用 EAS 出包,要动原生时再到本地。先确定这一步的目标,再选方式,会比一上来就纠结哪个「更好」更实际。
VP0 能提供免费的 React Native 模板吗?
可以。VP0 是一个免费的 iOS 应用设计库,每个设计都有一个机器可读的 source page,AI 工具可以直接读取,并且有 React Native 和 SwiftUI 两种版本。你先挑一个接近的设计,把链接交给 Claude Code、Cursor 或 Rork 生成代码,再按 prebuild 流程导出到 Xcode,这样界面从一开始就是按真实布局来的,而不是靠提示词硬猜。
导出时报错最常见的原因是什么?
最常见的几个是:app.json 里 bundle identifier 等配置没填好导致 prebuild 失败、Xcode 里没选开发者团队导致签名错误、CocoaPods 太旧导致 pod install 报错、以及打开了 .xcodeproj 而不是 .xcworkspace 导致依赖找不到。按顺序检查配置、签名、Pod、以及打开的文件,绝大部分报错都能解决。
社区里的更多问题
如何把 Rork 项目导出到 Xcode?
三步:先从 Rork 把源码导出到本地并 npm install,再运行 npx expo prebuild 生成原生的 ios 文件夹,最后用 Xcode 打开 .xcworkspace 并配好签名。因为 Rork 底层是 Expo,所以这就是标准的 Expo prebuild 流程,没有什么特殊魔法。如果想让导出的工程结构干净,建议先用一个免费的 VP0 设计,让 Claude Code 或 Cursor 在它基础上生成代码,再导出。
导出到 Xcode 后还能继续用 Rork 吗?
可以,但要理解一旦你 prebuild 生成了 ios 目录并在 Xcode 里改了原生代码,再回到托管流程就要小心,因为你的改动在原生层。常见做法是:界面和业务逻辑尽量在 React Native 代码里改,原生层的改动单独记录好。如果你还没动原生代码,随时可以删掉 ios 重新 prebuild。先想清楚哪些改动在 JS 层、哪些在原生层,协作就不会乱。
用 EAS Build 还是本地 Xcode 更好?
看你要做什么。只想拿到能安装的包、又不想配本地环境,就用 EAS 在云端构建。需要改原生代码、加原生模块或本地调试,就 prebuild 到本地用 Xcode。两者可以结合:平时用 EAS 出包,要动原生时再到本地。先确定这一步的目标,再选方式,会比一上来就纠结哪个更好更实际。
VP0 能提供免费的 React Native 模板吗?
可以。VP0 是一个免费的 iOS 应用设计库,每个设计都有一个机器可读的 source page,AI 工具可以直接读取,并且有 React Native 和 SwiftUI 两种版本。你先挑一个接近的设计,把链接交给 Claude Code、Cursor 或 Rork 生成代码,再按 prebuild 流程导出到 Xcode,这样界面从一开始就是按真实布局来的,而不是靠提示词硬猜。
导出时报错最常见的原因是什么?
最常见的几个是:app.json 里 bundle identifier 等配置没填好导致 prebuild 失败、Xcode 里没选开发者团队导致签名错误、CocoaPods 太旧导致 pod install 报错、以及打开了 .xcodeproj 而不是 .xcworkspace 导致依赖找不到。按顺序检查配置、签名、Pod、以及打开的文件,绝大部分报错都能解决。
Part of the Native Apple & SwiftUI: The iOS Ecosystem hub. Browse all VP0 topics →
Keep reading
AI 助手界面 React Native 组件库做法
把 AI 助手界面拆成可复用的 React Native 组件,消息列表、输入栏、流式气泡各管一摊。用 VP0 免费设计起步,交给 Cursor 生成。
Expo Router 中文移动端模板免费:路由加界面
Expo Router 用文件路由把导航变简单,你主要操心界面。免费起步:路由用 Expo Router,界面从 VP0 拿原生设计喂给 AI 生成。
抖音短视频信息流 UI 模板:竖屏上滑、流畅不卡
做类似抖音的短视频信息流,全屏竖视频、上滑切换、当前自动播放,关键是把列表虚拟化做好。用 VP0 挑接近的原生设计喂给 AI 生成,学结构别照搬品牌。
骨架屏加载占位 UI 模板:等待也要不慌
骨架屏在数据加载时显示灰色占位,比一个转圈更稳,能让等待感觉更短。用 VP0 挑接近的原生设计喂给 AI 生成,配好加载、空、错误三种状态。
无障碍大字版 App UI 模板:不只是把字调大
无障碍大字版要支持动态字体、对比度、触控区和读屏,不只是调大字。从一个干净的 VP0 原生设计起步再强化无障碍最省事。
AI 情感伴侣前端 React Native 组件库
把 AI 情感伴侣界面拆成可复用的 React Native 组件:角色卡、情绪气泡、礼物动效各管一摊。用 VP0 免费设计起步。