Expo 入门指南：让 React Native 开发更轻松(含环境搭建)

什么是 Expo

类似于 NextJS 与 React, Expo 是 React Native 版的 NextJS, 它是在 React Native 基础之上再建立一层框架, 解决了许多开发上的麻烦以及增加了许多 API。
提供了基于文件的路由、高质量通用库等功能、以及编写无需管理本机文件即可修改本机代码的插件的功能
完整的工具生态系统, 可帮助您编写、构建、更新、提交和监控移动应用程序
使应用程序的开发变得更加容易, 例如基于文件的路由、本机模块的标准库等等
Expo 提供了各种可以独立使用的工具和服务, 因此答案取决于您选择使用哪些工具

一、创建项目

开始前, 参考 Expo 官网, 我们先快速把项目搭建起来。在终端执行下列命令, 该命令将会在 当前目录 下创建一个 新的项目

sh 复制代码

npx create-expo-app@latest

上面 👆🏻 命令执行完毕, 则会在目录下多出来一个项目文件夹 [项目名]

于此同时, 官方其实给我们提供了许多模版, 这里我直接采用了默认的模版! 这里可以根据自己的需求, 采用适合自己的模版, 更多的信息可以查阅官方文档

在官方文档中提供了多种 开发环境选择, 可根据需要自行配置! 下面则介绍几种 个人 认为比较重要的几种方式(仅 IOS)! 具体的文档可查阅官方文档

二、开发环境: 像 Web 一样进行开发调试

项目目录下, 执行下列命令, 启动项目:

sh 复制代码

npm start

如上图所示, 项目起来后, 在终端返回信息中, 会有对应 Wbe 页面地址, 可在浏览器中直接进行访问:

既然浏览器可以直接进行访问, 那我们自然也可以在开发阶段直接在浏览器中进行简单调试、开发...

三、开发环境: Expo Go

如果你需要再真机上快速访问, 那么使用 Expo Go 应该是最方便、快捷的。

首先先运行下列命令, 启动项目:

sh 复制代码

npm start

如下图所示, 项目起来后, 终端返回信息中, 你会发现有个二维码:

下面我们可以通过官方 App, 通过扫描该二维码来访问本地运行的项目:

首先需要先下载官方应用 Expo Go, 直接在 App Store 上检索、下载、安装即可。
然后打开 相机拍照功能, 扫描二维码, 相机画面中则会出现「在 Expo Go 中打开」的提示按钮, 点击提示按钮即可访问项目 (注意: 这一步方法仅限 IOS, 至于安卓要怎么操作就不知道了)

手机访问效果如下:

四、开发环境: 模拟器(IOS)

常规开发阶段, 我们一般都是使用本地 IOS 模拟器来进行开发的, 本节就「如何在本地通过 IOS 模拟器运行项目?」进行展开说明....

4.1 配置 Xcode

第一步安装 Xcode: Mac 打开 App Store 搜索 Xcode 然后选择安装或更新

第二步安装 Xcode 命令行工具: 打开 Xcode 配置页, 切换到 Locations, 在 Command Line Tools 下拉菜单中选择最新版本进行安装。这里需要注意的是我们打开配置页时, 可能默认情况下它就选中最新的一个版本, 但是呢实际上我们并没有安装成功。这里我们需要手动打开下拉框点击一下那个版本(这样才会触发更新), 这时不出意外会出现 Mac 身份校验的弹窗, 根据提示完成安装就行...

第三步下载组件, 如下, 下载对应 IOS 组件

4.2 安装 Watchman

Watchman 主要用于监听文件变更并触发相应的操作，它由 Meta(Facebook) 开发, 广泛用于前端开发、React Native 开发、Babel、Jest 等场景! 主要作用:

文件监控: 高效监听文件系统的变化 (增删改）
自动触发任务: 结合 watchman watch 规则, 可实现在文件变化时执行 自动构建、热更新、测试等一系列操作
高性能文件索引: 通过增量更新和缓存, 减少全量扫描的性能开销, 提高查询速度
配合 Jest 进行测试优化: Jest 依赖 Watchman 监听测试文件变化, 加速测试执行
提高 Git 操作效率: Mercurial(类似 Git 的版本管理工具) 使用 Watchman 来优化 status、log 等操作，使代码仓库管理更高效

总之安装它将带来更好的性能

sh 复制代码

brew update
brew install watchman

4.3 在 IOS 模拟器上运行应用程序

先在项目的根目录中运行以下命令来安装 expo-dev-client:

sh 复制代码

npm start

项目运行后, 在终端输入 i, 稍等片刻, 即可通过模拟器启动项目:

五、开发环境: 真机调试(不走 Expo)

在产品开发、迭代过程中, 我们难免会遇到一些棘手的 BUG 需要再真机上进行调试, 本小节就简单走个流程来简单演示下, 如何使用真机运行我们本地项目!

5.1 配置 Xcode

这一步和上面 👆🏻 是一样的, 如何设置了, 可忽略!

打开 Mac App Store 搜索 Xcode 然后选择安装或更新

打开 Xcode 配置页, 切换到 Locations, 在 Command Line Tools 下拉菜单中选择最新版本进行安装。这里需要注意的是我们打开配置页时, 可能默认情况下它就选中最新的一个版本, 但是呢实际上我们并没有安装成功。这里我们需要手动打开下拉框点击一下那个版本(这样才会触发更新), 这时不出意外会出现 Mac 身份校验的弹窗, 根据提示完成安装就行...

5.2 安装 Watchman

这一步和上面 👆🏻 是一样的, 如何设置了, 可忽略!

sh 复制代码

brew update
brew install watchman

5.3 配置项目

在项目根目录下安装 expo-dev-client

sh 复制代码

npx expo install expo-dev-client

5.4 连接手机

通过 USB 将 Mac 和 IPhone 连接起来, 并启用开发者模式:

使用 USB 转 Lightning 线将 iOS 设备连接到 Mac。如果出现提示, 是否信任此电脑, 选择信任即可。
打开 Xcode。从菜单栏中选择 Window > Devices and Simulators。您将在 Xcode 中看到一条启用开发者模式的警告, 请忽略即可。
在您的 iOS 设备上, 打开 设置 > 隐私和安全, 向下滚动到 开发者模式, 点击开关以启用开发者模式。启用后，设置会显示一条警报，警告你开发者模式会降低设备的安全性。要继续启用开发者模式，请点击警报的重启按钮, 设备重启并解锁后，设备会显示一条警报，确认您要启用开发者模式。点击"打开"，然后在出现提示时输入设备密码。