第 1 章：学习起步

1. React Native前置知识要求

在开始学习React Native之前，有一些前置知识你需要了解。不过别担心，我会带你逐步掌握这些内容，让你顺利入门。

1.1. JavaScript是必须掌握的

学习React Native，JavaScript是基础。你需要了解JavaScript的核心知识，比如：

变量（Variables）
函数（Functions）
数组（Arrays）
对象（Objects）
Promise 和 async/await
ES6 特性：箭头函数、解构赋值、扩展运算符等

如果你还不熟悉 JavaScript，不用担心。在课程的附录里安排了一个信息密集的JavaScript速成课，专门讲解 React Native所需要的JavaScript知识。

1.2. TypeScript 虽非必需，但强烈推荐

TypeScript不是学习React Native的前置要求，你完全可以用JavaScript开始。但从长远来看，我强烈推荐你了解 TypeScript。它有很多优势：

提升代码质量
减少 bug
更强的 IDE 支持和自动补全
更易维护大型项目

你可以先从JavaScript入手，后续再逐步学习TypeScript。

1.3. React.js 有帮助，但不是前提

虽然React.js和React Native在很多方面非常相似，比如组件、状态管理、props、Hooks 等等，但你不需要先学 React.js 再来学本课程。

在课程中，每当我写一行 React 相关代码，都会讲解它的作用和背后的概念。所以，即使你没有React.js的基础，也能顺利跟上课程内容。

1.4. 小结

开始这门React Native课程之前，你只需要掌握一件事：JavaScript。

TypeScript和React.js都不是必须的，我会在课程中为你讲解相关内容，帮助你循序渐进地掌握它们。

这门课程对初学者非常友好，无论你有没有前端开发经验，只要愿意学习，就能一步步掌握React Native。

准备好了吗？让我们开始学习吧！

2. 什么是React Native

你有没有想过，用一套代码同时开发iOS、Android和HarmonyOS应用会是多么高效？这就是React Native带给我们的魔力。

React Native是由 Meta（前身为Facebook）开发的一个开源JavaScript框架。它让开发者能够使用同一份代码，轻松打造跨平台的移动应用。换句话说，你写一次代码，就能同时运行在Android、iOS和HarmonyOS上，这不仅节省了大量时间和开发成本，也大大减轻了维护压力。

2.1. 为什么选择 React Native？

首先，React Native拥有庞大且活跃的社区和生态系统，这意味着你可以很容易找到各种资源、插件和技术支持。它使用 JavaScript或TypeScript编写，而JavaScript是目前最流行的编程语言之一，对很多开发者来说都非常熟悉。

对于有网页开发经验的程序员来说，学习React Native也是一条相对顺畅的路，因为它们有很多相似的概念和语法。

此外，React Native提供了“热重载”和“快速刷新”的功能，这让开发过程更加高效，修改代码后可以立即看到效果，大大提升了开发体验。

2.2. React Native 的行业应用

全球许多知名企业都选择了React Native来构建他们的移动应用，比如国外的Facebook、Instagram、Uber Eats、Pinterest、Walmart、Shopify、Tesla、Bloomberg、Discord、Microsoft等。

在中国，React Native 也受到了广泛认可和应用。阿里巴巴、京东、美团、字节跳动（抖音）、腾讯、饿了么、滴滴出行、小红书等多家互联网巨头，都在他们的产品中使用了React Native技术。

这些公司选择React Native的一个重要原因是，它帮助他们节省了招聘两支开发团队的成本和时间——iOS、 Android和HarmonyOS只需一支团队即可维护三套平台，大大降低了项目复杂度和预算。

2.3. 关于鸿蒙系统（HarmonyOS）

本课程主要聚焦于在Android 和 iOS平台上的应用开发，对于React Native结合鸿蒙系统（HarmonyOS）的开发内容，我将会在另一门专门课程中为大家详细讲解。

3. Expo 与 React Native 的区别

我有一个好消息要告诉你！

但在此之前，我们先来了解一下Expo CLI和React Native CLI之间的区别，以及它们各自的优缺点。

在学习React Native的时候，你首先需要决定选择哪种开发方式来学习和使用，因为它们有很多共同之处，但也存在一些差异。React Native Expo和React Native CLI的LOGO如图1-1所示。

图1-1 React Native CLI与React Native CLI

3.1. 什么是 Expo？

Expo是一个基于React Native之上的开发框架，它简化了开发流程，因为它提供了“托管式工作流”，也就是说：

你不需要配置Xcode或 Android Studio，甚至不需要涉及任何原生配置。

只需安装Expo，就可以立即运行你的React Native项目，极其方便。

3.1.1. Expo 的优点

超级简单易上手
自带丰富的内置API，如相机、通知、定位等

3.1.2. Expo 的缺点

打包后的应用体积相对较大
对原生模块的访问能力有限（某些功能无法实现或需额外配置）

3.2. 什么是 React Native CLI？

React Native CLI是使用React Native的默认方式，它给予你对原生代码的完整控制权。你会发现项目中包含 Android和iOS的原生文件夹，如图1-2 所示。

图1-2 React Native CLI项目目录结构

3.2.1. React Native CLI 的优点

可以完全访问原生模块
打包后的应用体积更小

3.2.2. React Native CLI 的缺点

配置环境相对复杂，需要设置Android Studio和Xcode
启动成本较高，开发速度比Expo稍慢一些

3.3. 那么问题来了，应该选择哪一个？

好消息是：React Native CLI和Expo CLI有很多共同点。

当你开发 UI 的时候，你会发现大约90%~95%的代码是完全相同的，也就是说，它们并不是完全不同的两个体系。

如果你是创业者或希望尽快上线应用的开发者，推荐使用Expo CLI，简单快速，适合快速验证产品。
如果你是想找React Native开发工作的学习者，推荐学习React Native CLI，因为在招聘市场上，企业更多使用 CLI 模式来开发。

3.4. 第二个好消息！

在本课程中，你将会学习两种方式：Expo CLI和React Native CLI。

我们会从更简单、上手更快的Expo开始学起，然后再过渡到CLI，帮助你逐步打下扎实的开发基础！

4. Expo Snack 使用

在正式进入React Native的开发之前，我想先向你介绍一个非常实用的小工具 —— Expo Snack。

4.1. 什么是 Expo Snack？

Expo Snack是一个可以让你直接在浏览器中编写和运行React Native代码的平台。你无需安装任何开发环境，只需要一个浏览器和网络，就可以立即体验React Native的魅力。

你只需在Google搜索 “Expo Snack”，点击第一个结果 —— “Snack - React Native in the browser - Expo”，即可进入使用页面。或者直接使用浏览器访问官方网站。网站的默认界面如图1-3所示。

图1-3 Expo Snack官网首页

虽然我们在课程中不会用Expo Snack来构建真正的项目，但我还是希望你了解这个工具，因为它真的非常方便，特别适合：

快速尝试想法
与他人协作调试
演示代码片段
进行跨平台预览测试（iOS 和 Android）

4.2. 它具体能做什么？

4.2.1. 在线协作

你可以通过分享Snack链接，与他人实时编辑代码，非常适合团队调试。

4.2.2. 跨平台预览

无需真机，你可以直接在浏览器中预览Web、iOS、Android效果，如图1-4所示。

图1-4 在浏览器里预览Web、iOS、Android各平台页面效果

4.2.3. 真机调试

4.2.3.1. 直接下载Expo

你也可以选择在自己的手机上运行代码。只需从App Store或Google Play下载Expo Go（如图1-5），然后扫码，就可以在真机上直接查看效果，非常方便。

图1-5 访问链接或扫码下载Expo。

4.2.3.2. iPhone手机下载、安装及运行Expo Go

iPhone(苹果)手机直接去App Store上下载和安装Expo Go。具体操作过程效果图截图如图1-6所示。

AppStore下载界面

下载安装成功界面

Expo Go 打开界面

图1-6 iPhone手机上下载、安装及运行效果图

4.2.3.3. Android手机下载、安装及运行Expo Go

Android手机需要去Google Play安装（如图-7），如果在电脑上安装需要连接手机设备。无论如何，都需要访问google的网站。这个在大陆还是有限制的。

图1-7 Google Play 安装Expo Go

因此，本文给大家介绍一种直接安装的方式，把相关的安装包给大家准备好。具体包的下载和安装如下所述。各操作过程界面如图-8所示。

（1）下载安装XAPKInstaller

XAPKInstaller应用包下载地址：com.wuliang.xapkinstaller.apk

XAPK是Android应用的打包格式，结合了APK和OBB文件，便于大应用的分发和安装。XAPK将所有数据保存在一个文件中，简化了安装过程，并可能提供更高的安全性。使用XAPKInstaller或APKPure等工具可方便地在Android设备上安装XAPK文件。

（2）下载安装Expo Go安装包

Expo Go安装包下载地址：ExpoGo-2.33.20-APKPure.xapk

通过上述地址下载并使用XAPAInstaller安装Expo Go。

XAPKInstaller安装界面

运行XAPKInstaller界面

安装成功的Expo Go界面

Expo Go打开界面

图1-8 通过直接下载安装包来安装Expo

（3）在真机的Expo Go里运行React Native程序

具体运行方法和效果，参见本章“4.3.2. 在真机上运行代码”。

4.3. 写下你的第一行 React Native 代码

如果你已经迫不及待想要动手写点代码，那我们现在就来写下你人生中的第一段React Native程序吧！

我们先把默认代码清空，删掉原来的图片组件，然后写一个简单的 "Hello World"。

4.3.1. 编写代码

在Expo Snack里，在原来默认模板的代码基础上改写代码：

import { Text, SafeAreaView, StyleSheet } from 'react-native';

// 你可以从 npm 导入受支持的模块。
import { Card } from 'react-native-paper';

// 或者从 Snack 中的任何文件导入。
import AssetExample from './components/AssetExample';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.paragraph}>
        Hello World.
      </Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 50,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

4.3.2. 在真机上运行代码

上述代码在Expo Snack中，选择My Device页签，显示在真机设备上通过Expo Go运行代码的入口二维码。由于我们真机上安装的Expo的版本是v53.0.0，因此这里的版本也要选择v53.0.0，如图1-9所示。

图1-9 Expo Snack界面

以苹果手机为例，通过“相机”扫描Expo Snack网站界面的二维码，点击“在Expo Go中打开”按钮，如图1-10所示。

图1-10 苹果手机扫码

上面代码会在黑色背景上显示一个黑色的 “Hello World.”，字体大小为 50，如图-11所示。

图1-11 在Expo Go中显示的代码运行效果

别担心，如果你对这段代码还不熟悉，我们会在后面的课程中逐行讲解：

如何导入和使用React Native提供的组件
什么是 SafeAreaView、Text、StyleSheet
如何编写函数式组件
如何设置样式
如何渲染你的组件

现在的你只需要写下第一行代码，打开React Native的大门！

5. 环境准备

要开始使用 React Native 进行开发，首先需要安装 Node.js。

5.1. 安装 Node.js

在 macOS 操作系统中，系统终端被称为 Terminal；在 Windows 系统中，则称为命令提示符（Command Line），通常可以通过搜索“cmd”快速找到。在 macOS 中，打开“应用程序”，搜索“Terminal”即可启动终端，如图1-12所示。

图1-12 Mac系统终端

如果您的系统尚未安装 Node.js，可以通过以下方式进行安装：

打开浏览器，在 Google 中搜索 “node download”，点击第一个搜索结果，如图1-13所示。

图1-13 Node官网入口

网站会根据您的操作系统自动推荐合适的版本：

（1）如果您使用的是 macOS，页面将提供 macOS 安装包，点击即可下载，如图1-14所示。

图1-14 macOS系统下载入口

（2）如果您使用的是 Windows，默认将展示 Windows 安装包，并提供系统架构的选择（如 x64 等），如图1-15所示。

图1-15 Windows系统下载入口

下载完成后，双击安装包进行安装。安装流程与普通软件类似，在 macOS 上安装时可能会要求输入系统密码。

安装完成后，建议重新打开一个新的终端窗口，输入以下命令验证安装是否成功：

node -v

如果成功，将显示已安装的 Node.js 版本号（例如：v22.16.0）。同时，输入以下命令检查 npm 是否也已正确安装：

npm -v

若上述两个命令均返回版本号，则说明 Node.js 与 npm 已成功安装，如图

图1-16 安装成功界面

注意：请不要在下载 Node.js 之前打开的终端窗口中执行这些命令。安装完成后，请关闭原有终端，重新打开一个新的终端或命令行窗口再进行测试。

5.2. 安装 Visual Studio Code 编辑器

在完成 Node.js 安装之后，我们需要安装代码编辑器。本课程将使用 Visual Studio Code（VS Code）作为主要开发工具。

安装步骤如下：

打开 Google，搜索 “VS Code”，点击进入官网。
根据您的操作系统选择合适版本进行下载（Windows、Linux 或 macOS）。
下载完成后，按照提示完成安装流程。

图1-17 VS Code下载入口

安装完成后，打开 VS Code 编辑器，并安装以下推荐扩展插件。这些插件将在 React Native 开发过程中提供极大帮助：

React Native Snippet
React Native Tools
ES7+ React/Redux/React-Native snippets
React-Native/React/Redux snippets for es6/es7
Code Spell Checker：用于拼写检查
Material Icon Theme：用于优化文件与文件夹图标
Prettier - Code formatter：用于代码自动格式化

您可以在扩展市场（Extensions）中逐一搜索插件名称并点击“安装”按钮。例如，搜索 “react js”，点击插件条目中的“install”按钮即可，如图1-18所示。

图1-18 扩展插件安装

插件安装完成后，建议关闭并重新打开 VS Code，以确保插件正确加载。

这些准备工作完成后，您就可以开始编写第一个 React Native 应用了。

6. 创建你的第一个应用

6.1. 创建应用

现在是时候创建你的第一个 React Native 应用了。

首先，在你电脑中选择任意一个你喜欢的文件夹，在该文件夹中打开终端（Terminal），然后输入以下命令：

npx create-expo-app@latest 你的应用名称

你可以自由命名这个应用，比如我们命名为 FirstApp，那么命令如下：

npx create-expo-app@latest FirstApp

接下来，我们还可以使用 --template 参数来选择一个模板（如图1-19所示）。命令会提示你选择以下五种模板之一：

npx create-expo-app@latest FirstApp --template

图1-19 安装命令

blank（空模板）
blank (TypeScript)（空模板 + TypeScript）
navigation (TypeScript)（集成导航的 TypeScript 模板）
blank (bare workflow)（基础裸工作流）

在这里我们选择 “blank (TypeScript)” 模板（如图1-20），然后按下回车键。

图1-20 选择模版

到这里，我们就已经成功创建好了第一个应用，如图1-21所示。

图1-21 创建完成

6.2. 打开项目

现在，你可以使用以下命令进入你的项目目录（如图1-22）：

cd FirstApp

图1-22 进入应用目录

然后我们在该目录中打开 VS Code 编辑器，执行：

code .

如图1-23所示。

图1-23 在命令行里打开VS Code

现在，这就是你的第一个 React Native 应用，我们将在其中开始编码，如图1-24所示。

图1-24 FirstApp应用目录

我会在接下来的课程中逐行讲解每一部分代码的含义。

但在此之前，我们先来尝试把这个应用运行在你的手机上吧。

7. iOS 模拟器

要运行 iOS 虚拟设备，你需要一台 Mac。

如果你没有 Mac，不用担心，你可以像前一节课中所学的那样，在你的真实设备上运行应用程序。

或者，如果你使用的是 Windows，也可以使用 Android 虚拟设备（AVD） 来运行应用程序。

在本节课程中，如果你拥有 Mac，那我们就来添加 iOS 模拟器。

7.1. 下载安装模拟器

首先，打开 App Store，搜索 Xcode。这是构建 iOS 应用所需的 Xcode 工具，如图1-25所示。

图1-25 Xcode下载入口

点击“获取”按钮，下载 Xcode。

下载完成后打开 Xcode，你会看到类似这样的界面，如图1-25所示。

图1-25 Xcode第一次打开，下载模拟器的界面

如果安装时没有选择iOS模拟器选项，也可以在Xcode左上角点击 Xcode > 设置（Settings），然后进入 Components（组件），确保你安装了最新版本的 iOS 模拟器。当前最新的是 iOS 18.4（后续可能会有更新版本），请务必点击“获取”按钮来安装。如图1-27所示，已经安装成功了。

图1-26 设置入口

如图1-27 iOS模拟器

然后切换到 Locations（位置） 标签页，确保你安装了最新版本的 Command Line Tools（命令行工具），如图1-27所示。

图1-27 Locations设置

7.2. 运行模拟器

完成上述操作后，就可以点击顶部菜单中的 Xcode > Open Developer Tool（打开开发者工具） > Simulator（模拟器）(如图1-28所示)，打开 iOS 模拟器，如图1-29所示。

图1-28 打开模拟器入口

图1-29 iOS模拟器

7.3. 运行项目代码

现在我们来运行代码。

进入你创建的第一个 React Native 项目（Expo 项目），在终端中输入：

npm start

效果如图1-30所示。

图1-30 启动项目

启动完成后如图1-31所示。

图1-31 启动成功界面

启动项目后，按下键盘上的 I 键，即可在 iOS 模拟器中运行应用程序。

你将看到输出了 “Hello, World!” 字样。

图1-32 FirstApp模拟器运行效果

另外我还想告诉你，如果你的电脑上安装了多个模拟器设备，那么在运行时可以按下 Shift + I，

这会弹出一个模拟器选择列表（如图1-33所示），比如：

iPhone 16
iPhone 16 Pro
iPhone 16 Pro Max

你只需选择一个（比如 iPhone 16 Pro Max），然后按下 Enter 键即可在该设备上运行应用，如图1-34所示。

图1-33 多模拟器选择

图1-34 双模拟器运行效果截图

8. Android 模拟器

在开始本节内容之前，我想先说明一点：配置 React Native 的开发环境是一个稍显复杂的过程，在此过程中你可能会遇到各种错误。但请不要因此感到沮丧，一旦你完成了配置，这些步骤就不再需要重复操作了。如果遇到问题，欢迎在课程的留言区留言，我会及时为你解答。

接下来，我们将学习如何在 macOS 上配置 Android 模拟器以运行 React Native 应用。以下是详细步骤：

8.1. 查阅 Expo 官方文档

首先，打开浏览器，在 Google 搜索中输入 Expo docs，点击第一个链接，进入 Expo 官方文档。在页面中向下滚动，找到「Set up your environment」部分。

你将看到多个选项：

Android device 和 iOS device 指的是在真实设备上运行应用。
本节内容我们关注的是 Android Emulator，即使用模拟器运行应用。

点击「Android Emulator」并按照其提供的指南操作，如图1-35所示。

图1-35 选择Android模拟器环境

选择完毕后，接下来安装Android模拟器并在模拟器上安装Expo Go。如图1-36所示，按照官网指导的流程进行安装和配置。

图1-36 安装和配置步骤

下面把官网的步骤拿过来，照着流程一步一步操作即可。

8.2. 下载并安装 Android Studio

点击文档中的链接或直接访问 Android Studio 官网。
选择适合你设备的版本：

如果你的 Mac 是 Intel 芯片，请选择对应版本；
如果是 Apple 芯片（如 M1、M2、M3 或 M4），请选择Mac(64位，ARM)版本。如图1-37，我的电脑下载的版本红框所示。

图1-37 选择合适版本

接受条款并点击下载按钮下载，如图1-38所示：

图1-38 下载入口

Android Studio 安装包大约 1GB，请耐心等待下载完成。下载后，将其拖入「应用程序」文件夹（如图1-39）并双击打开（如图1-40）。

如图1-39 拷贝到应用程序

图1-40 打开欢迎界面

8.3. 配置 Android SDK

打开 Android Studio 后，执行以下操作：

点击绿框处的两组授权，分别在右下方选中“Accept”，如图1-41所示。

图1-41 包协议授权

1. 点击「Finish」按钮。

2. 开始下载相关组件，如图1-42所示。

图1-42 包下载中

3. 下载完成，点击「Finish」按钮，如图1-43所示。

图1-43 包下载完成

4. 点击「Finish」按钮后，打开Android Studio欢迎页面。点击「More Actions」下拉菜单，点击「Virtual Device Manager」，如图1-44所示。

图1-44 打开模拟器管理

5. 点击「Virtual Device Manager」后，打开模拟器列表可以单击添加虚拟机设备。点击，启动虚拟机，如图1-45所示。

图1-45 虚拟机列表

6. 虚拟机启动后，如图1-46所示。

图1-46 虚拟机启动界面

8.4. 运行 React Native 应用

确保你已创建第一个 React Native 项目，并在 VS Code 中打开：

npm start

这将启动 Metro Bundler，接着按下键盘上的 a 键（如图1-47所示），即可在 Android 模拟器中启动应用。你将看到 "Hello, World" 出现在模拟器屏幕上，如图1-48所示。

图1-47 启动应用界面

将代码样式的backgroundColor改为'#ee7400'后，在Android虚拟机上运行的效果如图1-48所示。

图1-48 应用在虚拟机上运行的效果

8.5. 总结

配置 React Native 的 Android 模拟器环境虽然步骤较多，但只需一次性完成。未来你将能够快速、顺利地启动和测试你的应用。如果过程中遇到任何问题，欢迎留言反馈，我将尽快为你提供帮助。

9. 真机调试

真机调试可以在Expo Snack里扫码进行，也可以在VS Code的终端里扫码启动（如图1-49所示）。其他操作过程参见「4.2.3 真机调试」、「4.3.2 在真机上运行代码」。

图1-49 终端启动应用后显示二维码

10. 在Windows上配置React Native开发环境

在本节中，我们将学习如何在 Windows 系统中配置 React Native 的开发环境，包括安装 Node.js、Android Studio 和配置 Android 模拟器。最终我们将使用 Expo 创建并运行一个测试项目，确保整个环境配置成功。

10.1. 安装 Node.js

首先，我们需要在 Windows 上安装 Node.js（即便你之前在 macOS 上安装过，Windows 上也需要重新安装一遍）。

10.1.1. 安装步骤

打开浏览器，搜索 Node.js download。
进入 Node.js 官网（https://nodejs.org/）。
点击适用于 Windows 的安装包（通常显示为 "Windows Installer"），如图1-50所示。

图1-50 Node.js安装入口

4. 下载完成后，双击打开安装程序，按以下顺序进行安装：

点击 Next；
勾选并接受许可协议；
一路 Next 到最后；
点击 Install；
如果弹出权限确认窗口，点击 Yes；
等待安装完成；
点击 Finish 完成安装。

图1-51 安装完成

10.1.2. 验证是否安装成功

打开命令提示符（Win + R，输入 cmd 回车），输入以下命令：

node -v

你将看到 Node.js 的版本号。接着再输入：

npm -v

这将显示 npm（Node 包管理器）的版本号，说明安装成功，入图1-52所示。

图1-52 命令行验证Node.js安装情况

10.2. 安装 Android Studio

接下来我们需要安装 Android Studio 作为 Android 模拟器的基础环境。

1. 打开 Android Studio 官网，直接点击下载按钮，入图1-53所示；或者下拉页面，找到下载列表，选择Windows(64位)，有.exe安装程序的版本，如图1-54所示。

图1-53 直接点击Android Studio下载入口

图1-54 Android Studio 下载列表

2. 点击下载链接，接受协议并再点击黑色按钮，开始下载，如图1-55所示。

1-55 开始下载

3. 下载完成后，双击运行安装程序，按以下步骤操作：

点击 Next；
确保勾选了 Android Virtual Device（用于模拟器）；
点击 Next，如图1-56所示；

图1-56 安装Android Studio——选择组件

点击 Install 并等待安装完成，如图1-57所示；

图1-57 安装Android Studio——开始安装

点击 Next 和 Finish 结束安装，如图1-58所示；

图1-58 安装Android Studio——安装完成

4. 打开 Android Studio 时，会弹出是否发送数据的提示，根据个人意愿选择 Send 或 Don't Send，如图1-59所示。选择点击按钮后，打开 Android Studio 欢迎页面，安装完成，如图1-60所示。

图1-59 提示信息

图1-60 安装完成

10.3. 配置 Android SDK 和工具

1. 打开 Android Studio，点击右下角的「More Actions」，选择「SDK Manager」，如图1-61所示。

图1-61 SDK 管理器入口

2. 在「SDK Platforms」中，确保某个 Android 版本（如 Android 15）已经安装，如图1-62；

图1-62 SDK Platforms选择

3. 切换到「SDK Tools」标签页，确认以下选项已勾选：

Android SDK Build-Tools
Android Emulator
Android SDK Platform-Tools

图1-63 SDK Tools选择

这些工具一般会默认安装，无需手动操作。如未安装，请勾选后点击 Apply 进行安装。

10.4. 配置环境变量

为了让命令行能够识别 Android 工具路径，我们需要添加两个系统环境变量，如图1-64所示。

图1-64 Expo 网站的安装步骤6

10.4.1. 配置步骤

1. 打开控制面板 > 用户账户 > 更改我的环境变量，如图1-65所示；

图1-65 Windows 环境变量设置

2. 点击「新建」，添加第一个变量：

变量名：ANDROID_HOME
变量值：在 Android Studio 中点击「More Actions」 > 「SDK Manager」，复制顶部显示的 SDK 路径（如 C:\Users\你的用户名\AppData\Local\Android\Sdk）；
粘贴到变量值中，点击「确定」，如图1-66所示。