Expo入门使用教程 附环境搭建教程

文
章
目
录

• 一、创建Expo项目
• 二、Web开发调试环境搭建
• 三、使用Expo Go在真机上快速访问
• 四、在IOS模拟器上进行开发
• （一）配置Xcode
• （二）安装Watchman
• （三）在IOS模拟器上运行应用程序
• 五、真机调试（不通过Expo）
• （一）配置Xcode
• （二）安装Watchman
• （三）配置项目
• （四）连接手机
• （五）配置证书

Expo框架和NextJS之于React类似，是搭建在React Native之上的一层框架，能够有效解决诸多开发难题，还提供了丰富的API，极大地提升了开发效率。比如说，它具备基于文件的路由功能，还有高质量的通用库，甚至支持编写无需管理本机文件就能修改本机代码的插件。不仅如此，Expo拥有一套完整的工具生态系统，从编写代码、构建项目，到更新应用、提交审核以及监控应用状态，都能提供有力支持。接下来，咱们就深入了解一下Expo的使用方法，包括项目创建和多种开发环境的搭建。

一、创建Expo项目

在开始Expo项目开发前，我们先按照Expo官网的指引，快速搭建项目框架。在终端中执行以下命令，它会在当前目录下生成一个新项目：

npx create-expo-app@latest

执行这条命令后，会出现一系列提示。首先，系统可能会询问是否确认安装create-expo-app@3.2.0，输入y确认即可。接着，需要为项目命名，比如我们输入“react – native – play”。等待片刻，项目文件夹就创建好了，里面包含了项目所需的各种文件和目录结构，如assets、components、constants、hooks等，还有.gitignore、app.json、package - lock.json等配置文件。

这里要注意，Expo官方提供了多种项目模板。我们这次选择的是默认模板，它适合构建多屏幕应用，并且集成了Expo CLI、Expo Router库，还启用了TypeScript配置，能满足大多数应用开发的需求。当然，如果有特殊需求，也可以根据官方文档，通过--template参数选择其他模板，像blank模板只安装了最基本的npm依赖，没有配置导航；blank - typescript则是在blank模板的基础上启用了TypeScript；tabs模板安装并配置了基于文件的路由和TypeScript；bare - minimum模板会生成原生目录（android和ios） ，在项目设置时会运行npx expo prebuild 。

二、Web开发调试环境搭建

项目创建好后，在项目目录下执行以下命令启动项目：

npm start

命令执行成功后，终端会输出一些信息，其中包含一个Web页面地址，类似http://localhost:8081。我们可以直接在浏览器中访问这个地址，就能看到项目的运行效果。在开发阶段，这种方式非常方便，我们可以像开发Web应用一样，直接在浏览器中进行调试和开发，实时查看代码修改后的效果。比如修改app/(tabs) index.tsx文件，保存后浏览器会自动刷新，展示修改后的内容，让开发过程更加直观、高效。

三、使用Expo Go在真机上快速访问

要是想在真机上快速访问项目，Expo Go是个不错的选择。同样在项目目录下执行npm start命令启动项目，启动成功后，终端会显示一个二维码。接下来：

1. 在App Store中搜索并下载安装官方应用“Expo Go”。
2. 打开手机的相机拍照功能，扫描终端显示的二维码。此时，相机画面中会出现“在Expo Go中打开”的提示按钮，点击这个按钮，就能在手机上访问本地运行的项目了。不过要注意，这个方法目前仅适用于iOS系统，安卓系统的操作方式有所不同。

通过Expo Go，我们可以在真机上更直观地感受项目在移动设备上的显示效果，方便及时发现和调整界面布局、交互等方面的问题。

四、在IOS模拟器上进行开发

在常规开发过程中，使用本地iOS模拟器进行开发是很常见的方式。下面详细介绍一下相关的配置步骤：

（一）配置Xcode

1. 打开Mac的App Store，搜索“Xcode”进行安装或更新。Xcode是苹果开发的集成开发环境，是进行iOS开发的重要工具。
2. 安装Xcode命令行工具：打开Xcode的配置页，切换到“Locations”选项卡，在“Command Line Tools”下拉菜单中选择最新版本进行安装。这里有个小细节要注意，有时候打开配置页时，默认选中的最新版本可能并未真正安装成功。此时，需要手动点击下拉框中的版本，触发更新操作，系统会弹出Mac身份校验弹窗，按照提示完成安装即可。
3. 下载组件：在Xcode的“Components”中，下载对应的iOS组件，如iOS 18.2等，这些组件是运行iOS项目所必需的。

（二）安装Watchman

Watchman是由Meta（原Facebook）开发的工具，在前端开发、React Native开发、Babel、Jest等场景中广泛应用。它主要有以下几个重要作用：

• 文件监控：能够高效地监听文件系统的变化，无论是文件的新增、删除还是修改，都能及时捕捉到。
• 自动触发任务：结合watchman watch规则，当文件发生变化时，它可以自动执行构建、热更新、测试等一系列操作。
• 高性能文件索引：通过增量更新和缓存技术，减少全量扫描的性能开销，从而提高文件查询速度。
• 配合Jest优化测试：Jest依赖Watchman监听测试文件的变化，以此加速测试的执行。
• 提高Git操作效率：类似Git的版本管理工具Mercurial，也会使用Watchman来优化status、log等操作，让代码仓库管理更加高效。

安装Watchman的命令如下：

brew update
brew install watchman

（三）在IOS模拟器上运行应用程序

先在项目的根目录下运行npm start命令，项目启动后，在终端输入i 。稍等一会儿，iOS模拟器就会启动项目，我们就能在模拟器中看到项目的运行效果了。在模拟器中，我们可以模拟各种手机操作，测试应用在不同设备尺寸和系统版本下的兼容性。

五、真机调试（不通过Expo）

在产品开发和迭代过程中，真机调试是必不可少的环节，有助于我们发现和解决一些在模拟器中难以察觉的问题。下面介绍如何在不通过Expo的情况下，使用真机运行本地项目：

（一）配置Xcode

这一步和在iOS模拟器上开发时的Xcode配置步骤相同，如果之前已经配置过，可以忽略这一步。主要包括在App Store安装或更新Xcode，安装Xcode命令行工具，以及下载iOS组件。

（二）安装Watchman

同样，如果之前已经安装过Watchman，这一步也可以跳过。安装命令还是：

brew update
brew install watchman

（三）配置项目

在项目根目录下运行以下命令，安装expo - dev - client：

npx expo install expo-dev-client

（四）连接手机

1. 使用USB转Lightning线将iOS设备连接到Mac。连接后，如果手机提示是否信任此电脑，选择信任。
2. 打开Xcode，从菜单栏中选择“Window > Devices and Simulators”。此时，Xcode中可能会出现启用开发者模式的警告，忽略即可。
3. 在iOS设备上，打开“设置 > 隐私和安全”，向下滚动找到“开发者模式”，点击开关启用开发者模式。启用过程中，设备会提示开发者模式会降低设备安全性，点击重启按钮。设备重启解锁后，会再次提示确认启用开发者模式，点击“打开”，并按提示输入设备密码。

（五）配置证书

1. 在项目目录下先执行npx expo prebuild -p ios命令，构建iOS项目。
2. 执行xed ios命令，在Xcode中打开项目下的iOS项目。
3. 在Xcode中为项目配置证书：在项目的“Signing & Capabilities”中，选择“Automatically manage signing”，并选择对应的团队和Bundle Identifier。配置完成后，在项目目录下执行npx expo run:ios --device命令，选择要连接的设备。

如果iPhone提示“不受信任的开发者”，需要将应用添加至信任。具体操作是：返回“VPN与设备管理”，找到来自对应开发者的App，选择信任。之后，设置网络，在弹出的界面中填入iOS本地项目地址，选择“Connect”，项目就能在真机上成功运行了。

通过以上几种开发环境的搭建，我们可以根据不同的需求，灵活选择合适的方式进行Expo项目的开发和调试。希望这篇文章能帮助大家快速上手Expo。