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.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 组件库做法: 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