React Native expo开发build系列2-Expo实用流程

UP主: 代码和远方 · 时长: 21:57 · 🔗 B站原视频

发布: 2024-06-11 · 收录: 2025-02-12

标签: React Native · Expo · 移动开发 · 前端开发 · APP打包

从传统 React Native 过渡到 Expo 流程

上节课回顾了传统 React Native 的开发到打包发布。今天进入主题，看看新时代的 React Native 开发，也就是 Expo。

Expo 首页还专门把 EAS 服务挑出来。它的开发打包流程，今天先过一遍。

新建 Expo 项目并启动

先建一个 Expo 新项目，这里就不详述了。新建项目后，安装完毕会看到一个标准的 app 目录。

运行它。标准方式是 npx expo start，其实连 start 都可以不打，直接 expo 也能跑起来。启动后会出现二维码和一个菜单。

以前我们点 i 进入 iOS 模拟器，点 a 打开安卓模拟器等。这里比较重要的是：用 Expo 新建项目时，会用 Expo Go 这个工具方便启动。

Expo Go 调试模式：方便，但有边界

如果点击 s，可以切换到一个叫 development build 的模式（开发 build / 开发包）。

但如果现在点了 s 再点 a 或 i，会报错，因为我们还没有对应的原生包，所以要切回 Expo Go 模式。

切回去之后，用 i 打开 Expo Go（我已经装了，所以能直接打开）。打开后可以看到它的调试菜单，注意一下这个菜单的样子：可以 Reload，也可以开关一些调试选项。

改一下页面内容，比如把 Welcome 改成 “哔哩哔哩”，热更新会马上生效，调试体验很好。

我也装过一个 Expo 插件，好像叫 Expo Tools，官方的，但不是很好用。

这种方式看似方便，但也有很大的限制：Expo 本质上是把常用的原生能力和包都放在一个“盒子”里，我们的程序去调用盒子里的东西。盒子外面的原生能力，它调用不了。

所以对于简单应用，Expo Go 调试非常方便。我也喜欢在开发初期，尤其是搭配路由（router）搭建、基础界面逻辑设计阶段，尽可能只用 Expo Go，省事儿而且不容易出错。

什么时候必须离开 Expo Go

真实开发中总会用到“盒子外”的原生包，包括第三方工具包或者更深入设备的功能。到了这个阶段，就该离开 Expo Go 了。

一旦离开 Go 这个工具，就基本一去不复返，很难再回去用它了，因为你引入了其他原生包后，用 Expo Go 就会报错。

Prebuild：生成原生目录（android/ios）

接下来执行 prebuild。执行之前要先想好包名（反向域名那种），这个大家应该熟。包名一旦设定好，安卓后面基本没法改。

它会问安卓包名是什么，会给例子。比如取 com.bibi 这种。苹果的 bundle id 最好也跟它一样，虽然苹果后面还有机会改。

还要说明一下：未来发布到市场时，这个包名是一个独一无二的标志，不能跟其他应用冲突。

然后会开始装 CocoaPods。看到根目录下生成两个新目录：android 和 ios，这就是原生文件所在目录。这个过程可能很慢，跟网络有关。我这次差不多等了十多分钟。

Run：第一次编译原生开发包

接下来用 run。第一次 run 时间也会很长，因为它要 build，为模拟器准备相应的原生运行文件。

有人会问：刚才不用 run，只用 start 行不行？我觉得第一次如果只用 start，可能会报错，因为还没生成原生文件，缺 build 过程。如果你想试，可以自己试一下，把结果发留言区。

run 之后你会发现又进入了类似的菜单，也有二维码。默认状态变成了 development build。

点 i 就可以运行。因为我刚才已经选了 iOS，所以直接运行就行。

Development Build：跟 Expo Go 类似，但已经不是 Go 了

运行后大家注意区别：多了一个图标，它不再是从 Expo Go 运行，而是从我们新建的实际应用程序运行。

进入应用后，再改代码，比如把内容改成 “Hello”，热更新仍然可以生效，效果看起来跟 Expo Go 很像。

但其实现在已经不在 Go 的状态了。调试菜单也不一样：在 Mac 模拟器里按 Command + D，弹出来的是传统 React Native 默认调试菜单，不是 Expo Go 那个“酷酷的菜单”。

这时候如果再切换回 Expo Go 模式去跑，会报错，因为它已经不在 Expo Go 的体系里了，而是在你刚才新建的这个程序上。

可选：安装 expo-dev-client，让菜单更像 Expo Go

这里有个可选项：装 expo-dev-client。

装完后再运行，你会看到一个新造型的菜单，跟 Expo Go 很像，稍微更酷一点。用哪个其实都一样。

另外注意：用 run 的时候每次都要打包编译。如果没有太大改变，用 start 启动也挺好，但要记得按 s 切到 development build，不要选 Expo Go 模式。

Prebuild 之后 run 过几次就正常了。我建议用 development build + start 这种方式来调试，会快一点。

真机调试：iOS 需要 Mac + Xcode

真机也可以调试。比如 iOS 用 run:ios --device（大意是这个命令），它会让你选择设备。我自己的真机会标出来，其他可能是 Xcode 生成的模拟器。

前提是你在 Xcode 里已经配置好你的手机可调试。

iOS 这套调试依赖 Xcode，也就是说必须有 Mac。Windows 只能用于安卓开发，前提是配好 Android Studio。

Prebuild 之后项目相当于“裸奔状态”，同时也具备更大的灵活性，不再受 Expo Go 的保护，但开发风险也会增加。

能不能直接用 Xcode / Android Studio 来跑和打包

有同学会想到：既然生成了 ios/ 和 android/，那是不是可以像以前一样直接在 Xcode 或 Android Studio 里操作、运行、打包？

确实可以，但是不是最优还不好说。我们先试一下。

打开 ios 目录，双击 xcworkspace。选一个模拟器（比如 iPhone 15），点运行。界面出来了，但一直不动，最后报错：connect to metro 之类。

原因是 Metro Server 没启动。项目运行分前端和后端（这里把 Metro Server 理解成服务端）。在 VS Code / 终端启动时，前端和 Metro 一起起来；但在 Xcode 里只启动了前端，后端的 Metro 它不会帮你启动，所以运行不了。

解决办法：回到终端，把 expo start（或者按它提示的方式）启动起来。启动到出现二维码那一步就行，不要再做其他动作，否则就变成从终端启动，而不是从 Xcode 启动。

然后 Xcode 再运行，就能连接上 Metro，启动成功。这时也能编辑代码，但确实没那么方便。

我相信一般不会用这种方式来调试。

如果想让手机“带出去独立运行”

如果你想把手机带出去独立运行、脱离开发机的 Metro Server，可以做 release。

在 Xcode 里点菜单栏的 Manage Schemes，找到项目名，Edit，把 Build Configuration 从 Debug 改成 Release，再运行就行。但这个过程会比较长，我就不演示了。

这时候应用就脱离了服务端。再改代码，热更新调试就不起作用了，这是很容易想到的。

Android Studio 的情况

安卓这边 Android Studio 我不太熟，我装它主要是为了装模拟器。理论上也能在里面打开目录调试、安装，跟 Xcode 一样，但我觉得也不是最好的办法。

当然也可以在里面直接打包发布。Xcode 里已经可以直接对项目打包发布了，Android Studio 也类似，只是打包前还要做大量配置。

用 Expo 命令把这些工作统一掉：本地免费流程

看完上面这些，会发现如果能在一个界面把运行、打包、调试做得更好就好了。现在我们在 VS Code 和终端里干这些，反而更方便。

Expo 官方也不太希望你在其他工具里做一些“危险动作”，他们准备了一套最佳实践。

比如要实现刚才的独立运行，可以用命令来做。以 iOS 为例，通过 npx expo run:ios 之类的命令，加上 --configuration Release，再选 device，就能装到指定设备上，效果跟刚才 Xcode 的 release 一样。

安卓也类似，通过 npx expo run:android，选择 variant 为 release，再装到模拟器或设备上。

到这里为止，我们用的工具都是免费的，而且都在本地进行，似乎也完成任务了。

引出 EAS：真正的大杀器下节讲

但 Expo 精心打造的大杀器 EAS 还没登场。

EAS 这个工具到底能带来什么好处？下节课接着讲。