Journal

如何将 Rork 导出到 Xcode:完整步骤指南

Rork 底层是 Expo,所以导出到 Xcode 不是「转换」,而是用 prebuild 把项目还原成标准 iOS 原生工程。

如何将 Rork 导出到 Xcode:完整步骤指南: a phone toggle icon surrounded by location, calendar, settings, wallet and chart app icons on a coral gradient

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 流程,按顺序来就不会乱。

  1. 导出源码:在 Rork 里把项目代码导出或下载到本地,得到一个完整的 React Native(Expo)项目文件夹。
  2. 安装依赖:进入项目目录,运行 npm install,把所有依赖装好。
  3. 生成原生工程:运行 npx expo prebuild,Expo 会根据你的配置生成 ios/(和 android/)文件夹,这一步把托管项目变成了带原生代码的工程。
  4. 安装 Pod:进入 ios/ 目录运行 pod install,装好原生依赖(新版本的 prebuild 通常会自动做这一步)。
  5. 打开 Xcode:用 Xcode 打开 ios/ 里的 .xcworkspace 文件,注意是 workspace 而不是 .xcodeproj
  6. 配置签名并运行:在 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.jsonapp.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 组件库做法: the App Store logo on a glass tile over a blue gradient with bubbles
Guides 4 min read

AI 助手界面 React Native 组件库做法

把 AI 助手界面拆成可复用的 React Native 组件,消息列表、输入栏、流式气泡各管一摊。用 VP0 免费设计起步,交给 Cursor 生成。

Lawrence Arya · May 30, 2026
Expo Router 中文移动端模板免费:路由加界面: the App Store logo on a glass tile over a blue gradient with bubbles
Guides 3 min read

Expo Router 中文移动端模板免费:路由加界面

Expo Router 用文件路由把导航变简单,你主要操心界面。免费起步:路由用 Expo Router,界面从 VP0 拿原生设计喂给 AI 生成。

Lawrence Arya · May 30, 2026
抖音短视频信息流 UI 模板:竖屏上滑、流畅不卡: a glass iPhone app-grid icon on a mint and teal gradient
Guides 4 min read

抖音短视频信息流 UI 模板:竖屏上滑、流畅不卡

做类似抖音的短视频信息流,全屏竖视频、上滑切换、当前自动播放,关键是把列表虚拟化做好。用 VP0 挑接近的原生设计喂给 AI 生成,学结构别照搬品牌。

Lawrence Arya · June 2, 2026
骨架屏加载占位 UI 模板:等待也要不慌: the App Store logo on a glass tile over a blue gradient with bubbles
Guides 4 min read

骨架屏加载占位 UI 模板:等待也要不慌

骨架屏在数据加载时显示灰色占位,比一个转圈更稳,能让等待感觉更短。用 VP0 挑接近的原生设计喂给 AI 生成,配好加载、空、错误三种状态。

Lawrence Arya · June 2, 2026
无障碍大字版 App UI 模板:不只是把字调大: a glass photo icon surrounded by chat, music, heart, camera and shopping app icons on a pastel gradient
Guides 3 min read

无障碍大字版 App UI 模板:不只是把字调大

无障碍大字版要支持动态字体、对比度、触控区和读屏,不只是调大字。从一个干净的 VP0 原生设计起步再强化无障碍最省事。

Lawrence Arya · May 30, 2026
AI 情感伴侣前端 React Native 组件库: a phone toggle icon surrounded by location, calendar, settings, wallet and chart app icons on a coral gradient
Guides 4 min read

AI 情感伴侣前端 React Native 组件库

把 AI 情感伴侣界面拆成可复用的 React Native 组件:角色卡、情绪气泡、礼物动效各管一摊。用 VP0 免费设计起步。

Lawrence Arya · May 30, 2026