设置你的开发环境
在本指南中,你将学习如何设置开发环境,以便使用 Android Studio 和 Xcode 运行你的项目。这将允许你使用 Android 模拟器和 iOS 模拟器进行开发,本地构建你的应用等等。
开发操作系统
- macOS
- Windows
- Linux
目标操作系统
- Android
- iOS
安装依赖
您需要 Node、Watchman、React Native 命令行接口、JDK 以及 Android Studio。
虽然您可以使用任意您喜欢的编辑器来开发您的应用,但您需要安装 Android Studio 以设置构建 React Native 安卓应用所需的工具。
Node & Watchman
我们推荐使用 Homebrew 来安装 Node 和 Watchman。安装完 Homebrew 后,在终端运行以下命令:
brew install node
brew install watchman
如果您已经在系统上安装了 Node,确保版本是 20.19.4 或更高。
Watchman 是 Facebook 开发的一个用于监控文件系统变化的工具。强烈建议安装它以获得更好的性能。
Java 开发工具包
我们推荐使用 Homebrew 安装名为 Azul Zulu 的 OpenJDK 发行版。安装完 Homebrew 后,在终端运行以下命令:
brew install --cask zulu@17
# 获取 cask 安装路径以找到 JDK 安装包
brew info --cask zulu@17
# ==> zulu@17: <版本号>
# https://www.azul.com/downloads/
# 已安装
# /opt/homebrew/Caskroom/zulu@17/<版本号> (185.8MB) (非 Apple Silicon Mac 路径为 /usr/local/Caskroom)
# 使用 formulae.brew.sh API 于 2024-06-06 10:00:00 安装
# 进入该文件夹
open /opt/homebrew/Caskroom/zulu@17/<版本号> # 或 /usr/local/Caskroom/zulu@17/<版本号>
打开 Finder 后,双击 Double-Click to Install Azul Zulu JDK 17.pkg 安装 JDK。
安装完成后,在 ~/.zshrc(或 ~/.bash_profile)中添加或更新 JAVA_HOME 环境变量。
如果使用上述步骤,JDK 通常位于 /Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home:
export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home
Zulu OpenJDK 发行版为 Intel 和 M1 Mac 都提供 JDK。这将保证在 M1 Mac 上构建速度比使用基于 Intel 的 JDK 更快。
如果您已经安装了 JDK,推荐使用 JDK 17。使用更高版本的 JDK 可能会遇到问题。
Android 开发环境
如果您是 Android 开发新手,设置开发环境可能略显繁琐。如果您已经熟悉 Android 开发,可能只需进行一些配置。无论哪种情况,都请务必仔细按照接下来的步骤操作。
1. 安装 Android Studio
下载并安装 Android Studio。在安装向导中,确保以下所有选项处于勾选状态:
Android SDKAndroid SDK PlatformAndroid Virtual Device
然后点击“Next”安装所有组件。
如果复选框为灰色,您可以稍后安装这些组件。
安装完成后,出现欢迎界面,继续进行下一步。
2. 安装 Android SDK
Android Studio 默认安装最新的 Android SDK。然而,使用原生代码构建 React Native 应用,需要特定的 Android 15 (VanillaIceCream) SDK。您可以通过 Android Studio 的 SDK 管理器安装额外的 Android SDK。
操作步骤:打开 Android Studio,点击“More Actions”按钮,选择“SDK Manager”。

SDK 管理器也可以在 Android Studio “设置”对话框中找到,路径为 Languages & Frameworks → Android SDK。
在 SDK 管理器中选择“SDK Platforms”标签页,右下角勾选“Show Package Details”。找到并展开 Android 15 (VanillaIceCream),确保勾选以下项目:
Android SDK Platform 35Intel x86 Atom_64 System Image或Google APIs Intel x86 Atom System Image,如果是 Apple M1 Silicon,选择Google APIs ARM 64 v8a System Image
接着,选择“SDK Tools”标签页,同样勾选“Show Package Details”。展开 “Android SDK Build-Tools”,确保选中 36.0.0 和 Android SDK Command-line Tools (latest)。
最后,点击“Apply”下载并安装 Android SDK 和相关构建工具。
3. 配置 ANDROID_HOME 环境变量
React Native 工具需要设置一些环境变量以便构建原生代码应用。
在 ~/.zprofile 或 ~/.zshrc(bash 用户则是 ~/.bash_profile 或 ~/.bashrc)配置文件中添加以下内容:
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
运行 source ~/.zprofile(bash 用户运行 source ~/.bash_profile) 使配置生效。通过运行 echo $ANDROID_HOME 验证 ANDROID_HOME 是否设置正确,通过运行 echo $PATH 验证相应目录是否加入路径。
请确保使用正确的 Android SDK 路径。可以在 Android Studio “设置”对话框中查看,路径为 Languages & Frameworks → Android SDK。
准备安卓设备
您需要一台安卓设备来运行 React Native 安卓应用。可以是真实的安卓设备,也常用安卓虚拟设备(AVD)在电脑上模拟安卓设备。
无论哪种,都需要对设备进行配置以支持开发运行安卓应用。
使用实体设备
如果您有实体安卓设备,可以通过 USB 数据线连接到电脑,按这里的指导进行设置,代替虚拟设备使用。
使用虚拟设备
如果用 Android Studio 打开 ./AwesomeProject/android,可以通过 Android Studio 内部的 “AVD Manager” 查看可用的安卓虚拟设备。找一个如下图标:
如果刚安装的 Android Studio,您可能需要新建 AVD。点击“Create Virtual Device...”,选择任意手机型号,点击“Next”,然后选择 VanillaIceCream API 级别 35 的系统镜像。
点击“Next”然后“Finish”完成 AVD 创建。此时您可以点击绿色三角按钮启动虚拟设备。
完成!
恭喜!您已成功搭建开发环境。

接下来做什么?
- 如果想将新的 React Native 代码集成到已有应用中,请查看集成指南。
- 如果想深入了解 React Native,请查看React Native 介绍。
安装依赖
你需要 Node、Watchman、React Native 命令行工具、Xcode 和 CocoaPods。
虽然你可以使用任何你喜欢的编辑器来开发应用,但你需要安装 Xcode 来设置构建 iOS React Native 应用所需的工具。
Node & Watchman
我们推荐使用 Homebrew 来安装 Node 和 Watchman。安装完 Homebrew 后,在终端运行以下命令:
brew install node
brew install watchman
如果你的系统里已经安装了 Node,请确保版本为 20.19.4 或更新。
Watchman 是 Facebook 开发的一个文件系统变更监视工具。强烈建议安装它以获得更好的性能。
Xcode
请使用 最新版本 的 Xcode。
安装 Xcode 最简单的方式是通过 Mac App Store。安装 Xcode 会同时安装 iOS 模拟器及构建 iOS 应用所需的所有工具。
命令行工具
你还需要安装 Xcode 命令行工具。打开 Xcode,选择 Xcode 菜单中的 Settings...(或 Preferences...)。进入 Locations(位置)面板,在 Command Line Tools(命令行工具)下拉菜单中选择最新版本进行安装。

在 Xcode 中安装 iOS 模拟器
要安装模拟器,打开 Xcode > Settings...(或 Preferences...),选择 Platforms(或 Components) 标签。选择你想使用的对应 iOS 版本的模拟器。
如果你使用的是 Xcode 14.0 或更高版本安装模拟器,打开 Xcode > Settings > Platforms 标签,点击 "+" 图标并选择 iOS… 选项。
CocoaPods
CocoaPods 是 iOS 上常用的依赖管理工具。CocoaPods 是一个 Ruby gem。你可以使用 macOS 最新版本自带的 Ruby 来安装 CocoaPods。
更多信息,请访问 CocoaPods 入门指南。
[可选] 配置你的环境
从 React Native 0.69 版本开始,可以使用模板中提供的 .xcode.env 文件配置 Xcode 环境。
.xcode.env 文件包含一个环境变量,用于将 node 可执行文件的路径导出到 NODE_BINARY 变量中。
这是 推荐的做法,用来将构建环境与系统默认的 node 版本解耦。如果你的路径不同或你使用了自己的 node 版本管理工具,请自行定制该变量。
此外,你还可以添加其他环境变量,并在构建脚本中引用 .xcode.env 文件。如果你需要在脚本中运行特定环境下的命令,这是 推荐做法:可以让构建阶段与具体环境解耦。
就这些!
恭喜你!你已成功搭建好开发环境。

接下来?
- 如果你想把这段新的 React Native 代码集成到已有应用中,请查看集成指南。
- 如果你想了解更多关于 React Native 的内容,请查看React Native 简介。
目标操作系统
- Android
- iOS
安装依赖项
您将需要 Node、React Native 命令行接口、JDK 和 Android Studio。
虽然您可以使用任何自己喜欢的编辑器来开发应用,但为了搭建构建 React Native Android 应用所需的工具,您需要安装 Android Studio。
Node、JDK
我们推荐通过 Windows 上流行的包管理器 Chocolatey 来安装 Node。
推荐使用 Node 的 LTS 版本。如果您想在不同版本间切换,可以通过 nvm-windows —— Windows 版本的 Node 版本管理器 来安装 Node。
React Native 还需要 Java SE 开发工具包 (JDK),也可以用 Chocolatey 来安装。
打开一个管理员命令提示符(右键点击命令提示符,选择“以管理员身份运行”),然后运行以下命令:
choco install -y nodejs-lts microsoft-openjdk17
如果您系统中已安装 Node,请确保是 20.19.4 版本或更高版本。如果系统已有 JDK,推荐使用 JDK17。使用更高版本的 JDK 可能会遇到问题。
您可以在 Node 的下载页面 找到更多安装选项。
如果您使用的是最新版本的 Java 开发工具包,您需要修改项目的 Gradle 版本以便其识别该 JDK。操作方法是在 {project root folder}\android\gradle\wrapper\gradle-wrapper.properties 文件中更改 distributionUrl 的值以升级 Gradle 版本。您可以在此处查看 Gradle 最新版本。
Android 开发环境
如果您是 Android 开发新手,搭建开发环境可能稍显繁琐。如果您已经熟悉 Android 开发,则可能只需配置一些内容。无论哪种情况,请务必认真按照接下来的步骤操作。
1. 安装 Android Studio
下载并安装 Android Studio。在 Android Studio 安装向导中,请确保勾选以下所有项目:
Android SDKAndroid SDK PlatformAndroid 虚拟设备(Android Virtual Device)- 如果您尚未使用 Hyper-V:
性能 (Intel ® HAXM)(AMD 或 Hyper-V 请见这里)
然后点击“下一步”安装所有这些组件。
如果复选框呈灰色,您可以稍后安装这些组件。
安装完成并进入欢迎界面后,继续下一步。
2. 安装 Android SDK
Android Studio 默认安装最新的 Android SDK。但构建含有原生代码的 React Native 应用需要特定的 Android 15 (VanillaIceCream) SDK。您可以通过 Android Studio 的 SDK 管理器安装额外的 Android SDK。
具体操作是,打开 Android Studio,点击“更多操作”按钮,选择“SDK 管理器”。

SDK 管理器也可在 Android Studio 的“设置”对话框中找到,路径为 语言与框架 → Android SDK。
在 SDK 管理器中选择“SDK 平台”标签页,然后勾选右下角的“显示包详情”。找到并展开 Android 15 (VanillaIceCream) 项,确保以下项目被选中:
Android SDK Platform 35Intel x86 Atom_64 系统映像或Google APIs Intel x86 Atom 系统映像
接着,选择“SDK 工具”标签页,也勾选“显示包详情”。找到并展开 Android SDK Build-Tools 项,确保选中 36.0.0 和 Android SDK 命令行工具 (最新)。
最后点击“应用”来下载并安装 Android SDK 及相关构建工具。
3. 配置 ANDROID_HOME 环境变量
React Native 工具需要设置一些环境变量,才能构建含原生代码的应用。
- 打开 Windows 控制面板。
- 点击 用户账户,然后再次点击 用户账户。
- 点击 更改我的环境变量。
- 点击 新建...,创建一个新的用户变量
ANDROID_HOME,指向您的 Android SDK 路径:
SDK 默认安装路径为:
%LOCALAPPDATA%\Android\Sdk
您也可以在 Android Studio 的“设置”对话框中找到 SDK 的实际路径,路径为 语言与框架 → Android SDK。
打开一个新的命令提示符窗口,确保新环境变量已加载,然后继续下一步。
- 打开 powershell
- 复制并粘贴命令 Get-ChildItem -Path Env:\ 到 powershell
- 确认
ANDROID_HOME已添加
4. 将 platform-tools 添加到 Path
- 打开 Windows 控制面板。
- 点击 用户账户,然后再次点击 用户账户。
- 点击 更改我的环境变量。
- 选择 Path 变量。
- 点击 编辑。
- 点击 新建,将 platform-tools 的路径添加到列表中。
该文件夹的默认路径为:
%LOCALAPPDATA%\Android\Sdk\platform-tools
准备 Android 设备
您需要一个 Android 设备来运行 React Native Android 应用。这既可以是真实的 Android 设备,也可以是更常用的 Android 虚拟设备(AVD),后者允许您在电脑上模拟 Android 设备。
无论哪种方式,您都需要准备设备以开发运行 Android 应用。
使用真实设备
如果您有真实的 Android 设备,可以通过 USB 线连接电脑,将其用于开发,作为 AVD 的替代方案,详细操作请参见这里。
使用虚拟设备
如果您用 Android Studio 打开 ./AwesomeProject/android,可以在 Android Studio 内打开“AVD 管理器”查看可用的 Android 虚拟设备列表。寻找类似下面的图标:
如果刚安装 Android Studio,您很可能需要新建一个 AVD。选择“创建虚拟设备...”,然后从列表中挑选任意一款手机,点击“下一步”,然后选择 VanillaIceCream API Level 35 镜像。
如果您未安装 HAXM,点击“安装 HAXM”或按这些指令执行安装,然后回到 AVD 管理器。
点击“下一步”,然后点击“完成”来创建您的 AVD。此时,您可以点击虚拟设备旁的绿色三角按钮启动它。
就这些!
恭喜!您已成功搭建开发环境。

接下来做什么?
- 如果您想将这段新的 React Native 代码添加到已有应用中,请查看 集成指南。
- 如果您想进一步了解 React Native,请参阅 React Native 入门。
目标操作系统
- Android
- iOS
安装依赖
你需要安装 Node、React Native 命令行工具、JDK 和 Android Studio。
虽然你可以使用任意编辑器来开发你的应用,但你需要安装 Android Studio 来搭建构建 React Native 安卓应用所需的工具链。
Node
按照 你的 Linux 发行版的安装说明 安装 Node 20.19.4 或更高版本。
Java 开发工具包
React Native 当前推荐使用 Java SE 开发工具包(JDK)版本 17。使用更高版本的 JDK 可能会遇到问题。你可以从 AdoptOpenJDK 或通过你的系统包管理器下载并安装 OpenJDK。
安卓开发环境
如果你是安卓开发新手,搭建开发环境可能会比较繁琐。如果你已经熟悉安卓开发,可能只需配置好一些内容。无论哪种情况,请务必仔细按照接下来的步骤操作。
1. 安装 Android Studio
下载并安装 Android Studio。在安装向导中,确保勾选以下所有组件:
Android SDKAndroid SDK PlatformAndroid Virtual Device
然后点击“下一步”安装所有组件。
如果这些复选框是灰色不可选,后续安装时你仍有机会安装这些组件。
安装完成并显示欢迎界面后,继续下一步。
2. 安装 Android SDK
Android Studio 默认安装最新 Android SDK。但是,构建带原生代码的 React Native 应用需要特定版本的 Android 15 (VanillaIceCream) SDK。你可以通过 Android Studio 中的 SDK 管理器安装额外的 Android SDK。
操作方法:打开 Android Studio,点击“Configure”按钮,选择“SDK Manager”。
SDK 管理器也可以在 Android Studio “设置”对话框中找到,路径是 Languages & Frameworks → Android SDK。
在 SDK 管理器中选择“SDK Platforms”标签,然后在右下角勾选“Show Package Details”。找到并展开 Android 15 (VanillaIceCream) 条目,确保选中以下项目:
Android SDK Platform 35Intel x86 Atom_64 System Image或Google APIs Intel x86 Atom System Image
接着选择“SDK Tools”标签,同样勾选“Show Package Details”。找到并展开“Android SDK Build-Tools”,确保选择了 36.0.0 和 Android SDK Command-line Tools (latest)。
最后点击“Apply”下载并安装安卓 SDK 及相关构建工具。
3. 配置 ANDROID_HOME 环境变量
React Native 工具需要设置一些环境变量以构建带原生代码的应用。
在你的 $HOME/.bash_profile 或 $HOME/.bashrc(如果使用 zsh 则是 ~/.zprofile 或 ~/.zshrc)配置文件中添加以下内容:
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
.bash_profile 是针对 bash 的。如果你使用的是其他 shell,需要编辑相应的 shell 配置文件。
输入 source $HOME/.bash_profile(bash),或 source $HOME/.zprofile 加载配置到当前 shell。运行 echo $ANDROID_HOME 验证 ANDROID_HOME 是否设置成功,运行 echo $PATH 确认相关目录已加入路径。
请确保使用了正确的 Android SDK 路径。你可以在 Android Studio “设置”对话框中查看实际路径,路径是 Languages & Frameworks → Android SDK。
Watchman
按照 Watchman 安装指南 从源码编译安装 Watchman。
Watchman 是 Facebook 开发的文件系统变化监听工具。强烈建议安装它,以提升性能并增强在某些边缘情况下的兼容性(换句话说,你可能可以不用安装,但体验会有所不同;现在安装可避免未来遇到麻烦)。
准备安卓设备
你需要一个安卓设备来运行 React Native 安卓应用。可以是实体设备,也可以更常见地使用安卓虚拟设备(AVD)在电脑上模拟。
无论哪种方式,都需要准备设备以便开发环境运行安卓应用。
使用实体设备
如果你拥有实体安卓设备,可以通过 USB 连接电脑,在 这里 按照说明进行设置,替代 AVD 进行开发。
使用虚拟设备
如果你使用 Android Studio 打开 ./AwesomeProject/android,可以通过 Android Studio 中的 “AVD Manager” 查看已有的安卓虚拟设备列表。找到下图所示的图标:
如果刚安装完 Android Studio,可能需要 创建新的 AVD。点击“Create Virtual Device...”,选择任一手机型号,点击“Next”,选择 VanillaIceCream API 级别 35 的镜像。
推荐配置 虚拟机加速 以提升性能。完成配置后,返回 AVD 管理器继续操作。
点击“Next”然后“Finish”完成 AVD 创建。此时你应该能点击 AVD 旁的绿色三角按钮启动虚拟设备。
完成了!
恭喜你!开发环境搭建成功。

接下来?
- 如果你想将此新 React Native 代码添加到已有应用中,可查看集成指南。
- 如果你想深入了解 React Native,可查看React Native 入门介绍。