设置您的环境
在本指南中,您将学习如何设置您的环境,以便您可以使用 Android Studio 和 Xcode 运行您的项目。这将允许您使用 Android 模拟器和 iOS 模拟器进行开发,在本地构建您的应用,等等。
开发操作系统
- macOS
- Windows
- Linux
目标操作系统
- Android
- iOS
安装依赖
你需要 Node、Watchman、React Native 命令行界面、JDK 和 Android Studio。
虽然你可以使用任何编辑器来开发应用,但你需要安装 Android Studio 以便设置必要的工具来构建你的 React Native Android 应用。
Node 和 Watchman
我们建议使用 Homebrew 安装 Node 和 Watchman。安装 Homebrew 后,在终端中运行以下命令:
brew install node
brew install watchman
如果你已经在系统上安装了 Node,请确保它是 Node 18.18 或更新版本。
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)
# 于 2024-06-06 10:00:00 使用 formulae.brew.sh API 安装
# 导航到文件夹
open /opt/homebrew/Caskroom/zulu@17/<version number> # 或 /usr/local/Caskroom/zulu@17/<版本号>
打开 Finder 后,双击 Double-Click to Install Azul Zulu JDK 17.pkg 包以安装 JDK。
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 Studio 安装向导中,确保选中以下所有项目旁边的复选框:
Android SDKAndroid SDK PlatformAndroid Virtual Device
然后,点击 "Next" 安装所有这些组件。
如果复选框是灰色的,你稍后将有机会安装这些组件。
设置完成后,当你看到欢迎屏幕时,继续下一步。
2. 安装 Android SDK
Android Studio 默认安装最新的 Android SDK。但是,构建带有原生代码的 React Native 应用特别需要 Android 15 (VanillaIceCream) SDK。额外的 Android SDK 可以通过 Android Studio 中的 SDK Manager 安装。
为此,打开 Android Studio,点击 "More Actions" 按钮并选择 "SDK Manager"。

SDK Manager 也可以在 Android Studio 的 "Settings" 对话框中找到,位于 Languages & Frameworks → Android SDK 下。
在 SDK Manager 中选择 "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" 条目,然后确保选中 35.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)将配置加载到当前 shell 中。通过运行 echo $ANDROID_HOME 验证 ANDROID_HOME 是否已设置,并通过运行 echo $PATH 验证适当的目录是否已添加到你的路径中。
请确保你使用正确的 Android SDK 路径。你可以在 Android Studio 的 "Settings" 对话框中找到 SDK 的实际位置,位于 Languages & Frameworks → Android SDK 下。
准备 Android 设备
你需要一个 Android 设备来运行你的 React Native Android 应用。这可以是物理 Android 设备,或者更常见的是,你可以使用 Android 虚拟设备(AVD),它允许你在计算机上模拟 Android 设备。
无论哪种方式,你都需要准备设备以运行用于开发的 Android 应用。
使用物理设备
如果你有物理 Android 设备,你可以使用它代替 AVD 进行开发,只需使用 USB 电缆将其连接到计算机并按照 此处 的说明操作。
使用虚拟设备
如果你使用 Android Studio 打开 ./AwesomeProject/android,可以通过打开 Android Studio 内的 "AVD Manager" 查看可用的 Android 虚拟设备(AVD)列表。寻找看起来像这样的图标:
如果你最近安装了 Android Studio,可能需要 创建一个新的 AVD。选择 "Create Virtual Device...",然后从列表中选择任意 Phone 并点击 "Next",然后选择 VanillaIceCream API Level 35 镜像。
点击 "Next" 然后点击 "Finish" 创建你的 AVD。此时你应该能够点击 AVD 旁边的绿色三角形按钮来启动它。
就是这样!
恭喜!你成功设置了开发环境。

接下来做什么?
- 如果你想将此新的 React Native 代码添加到现有应用中,请查看 集成指南。
- 如果你想了解更多关于 React Native 的信息,请查看 React Native 简介。
安装依赖
你将需要 Node、Watchman、React Native 命令行界面、Xcode 和 CocoaPods。
虽然你可以使用任何编辑器来开发你的应用,但你需要安装 Xcode 以便设置必要的工具来构建你的 React Native iOS 应用。
Node & Watchman
我们建议使用 Homebrew 安装 Node 和 Watchman。安装 Homebrew 后,在终端中运行以下命令:
brew install node
brew install watchman
如果你已经在系统上安装了 Node,请确保它是 Node 18.18 或更新版本。
Watchman 是 Facebook 提供的一个用于监视文件系统变化的工具。强烈建议安装它以获得更好的性能。
Xcode
请使用 最新版本 的 Xcode。
安装 Xcode 最简单的方法是通过 Mac App Store。安装 Xcode 还会安装 iOS 模拟器和构建 iOS 应用所需的所有必要工具。
命令行工具
你还需要安装 Xcode 命令行工具。打开 Xcode,然后从 Xcode 菜单中选择 设置... (或 偏好设置...)。前往 Locations 面板,通过在 Command Line Tools 下拉菜单中选择最新版本来安装工具。

在 Xcode 中安装 iOS 模拟器
要安装模拟器,打开 Xcode > 设置... (或 偏好设置...) 并选择 Platforms (或 Components) 标签页。选择你想要使用的对应 iOS 版本的模拟器。
如果你使用 Xcode 14.0 或更高版本安装模拟器,打开 Xcode > 设置 > Platforms 标签页,然后点击 "+" 图标并选择 iOS… 选项。
CocoaPods
CocoaPods 是 iOS 可用的依赖管理系统之一。CocoaPods 是一个 Ruby gem。你可以使用最新版 macOS 自带的 Ruby 版本来安装 CocoaPods。
更多信息,请访问 CocoaPods 入门指南。
[可选] 配置你的环境
从 React Native 0.69 版本开始,可以使用模板提供的 .xcode.env 文件来配置 Xcode 环境。
.xcode.env 文件包含一个环境变量,用于在 NODE_BINARY 变量中导出 node 可执行文件的路径。
这是将构建基础设施与系统版本的 node 解耦的 建议方法。如果与默认值不同,你应该用自己的路径或自己的 node 版本管理器自定义此变量。
除此之外,还可以添加任何其他环境变量,并在构建脚本阶段中 source .xcode.env 文件。如果你需要运行需要特定环境的脚本,这是 建议方法:它允许将构建阶段与特定环境解耦。
就是这样!
恭喜!你成功设置了开发环境。

接下来做什么?
- 如果你想将此新的 React Native 代码添加到现有应用中,请查看 集成指南。
- 如果你好奇想了解更多关于 React Native 的信息,请查看 React Native 介绍。
目标操作系统
- Android
- iOS
安装依赖
你需要 Node、React Native 命令行界面、JDK 和 Android Studio。
虽然你可以使用任何编辑器来开发应用,但你需要安装 Android Studio 以便设置必要的工具来构建你的 React Native Android 应用。
Node, JDK
我们建议通过 Chocolatey 安装 Node,这是一个流行的 Windows 包管理器。
建议使用 Node 的 LTS 版本。如果你想在不同版本之间切换,可能想通过 nvm-windows 安装 Node,这是一个 Windows 的 Node 版本管理器。
React Native 还需要 Java SE Development Kit (JDK),也可以使用 Chocolatey 安装。
打开管理员命令提示符(右键点击命令提示符并选择“以管理员身份运行”),然后运行以下命令:
choco install -y nodejs-lts microsoft-openjdk17
如果你已经在系统上安装了 Node,请确保它是 Node 18 或更新版本。如果你已经在系统上有了 JDK,我们推荐 JDK17。使用更高版本的 JDK 可能会遇到问题。
你可以在 Node 的下载页面 找到更多安装选项。
如果你使用的是最新版本的 Java Development Kit,你需要更改项目的 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 Virtual Device- 如果你尚未使用 Hyper-V:
Performance (Intel ® HAXM)(关于 AMD 或 Hyper-V 请参阅此处)
然后,点击"Next"安装所有这些组件。
如果复选框是灰色的,你稍后会有机会安装这些组件。
一旦设置完成并显示欢迎屏幕,请继续下一步。
2. 安装 Android SDK
Android Studio 默认安装最新的 Android SDK。然而,构建带有原生代码的 React Native 应用特别需要 Android 15 (VanillaIceCream) SDK。额外的 Android SDK 可以通过 Android Studio 中的 SDK Manager 安装。
为此,打开 Android Studio,点击"More Actions"按钮并选择"SDK Manager"。

SDK Manager 也可以在 Android Studio 的"Settings"对话框中找到,位于 Languages & Frameworks → Android SDK 下。
在 SDK Manager 中选择"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 条目,然后确保选中了 35.0.0 和 Android SDK Command-line Tools (latest)。
最后,点击"Apply"下载并安装 Android SDK 及相关构建工具。
3. 配置 ANDROID_HOME 环境变量
React Native 工具需要设置一些环境变量才能构建带有原生代码的应用。
- 打开 Windows 控制面板。
- 点击 用户账户, 然后再次点击 用户账户
- 点击 更改我的环境变量
- 点击 新建... 创建一个新的
ANDROID_HOME用户变量,指向你的 Android SDK 路径:
SDK 默认安装在以下位置:
%LOCALAPPDATA%\Android\Sdk
你可以在 Android Studio 的"Settings"对话框中找到 SDK 的实际位置,位于 Languages & Frameworks → 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 虚拟设备,它允许你在电脑上模拟 Android 设备。
无论哪种方式,你都需要准备设备以运行用于开发的 Android 应用。
使用物理设备
如果你有物理 Android 设备,你可以使用它代替 AVD 进行开发,只需使用 USB 电缆将其插入电脑并按照 此处 的说明操作。
使用虚拟设备
如果你使用 Android Studio 打开 ./AwesomeProject/android,你可以通过打开 Android Studio 内的"AVD Manager"查看可用的 Android 虚拟设备 (AVDs) 列表。寻找看起来像这样的图标:
如果你最近安装了 Android Studio,你可能需要 创建一个新的 AVD。选择"Create Virtual Device...",然后从列表中选择任意手机并点击"Next",然后选择 VanillaIceCream API Level 35 镜像。
如果你没有安装 HAXM,点击"Install HAXM"或遵循 这些说明 进行设置,然后返回 AVD Manager。
点击"Next"然后点击"Finish"创建你的 AVD。此时你应该能够点击 AVD 旁边的绿色三角形按钮来启动它。
就是这样!
恭喜!你成功设置了开发环境。

接下来做什么?
- 如果你想将此新的 React Native 代码添加到现有应用中,请查看 集成指南。
- 如果你想好奇了解更多关于 React Native 的信息,请查看 React Native 介绍。
目标操作系统
- Android
- iOS
安装依赖
你将需要 Node、React Native 命令行界面、JDK 和 Android Studio。
虽然你可以使用任何编辑器来开发你的应用,但你需要安装 Android Studio 以便设置构建 Android React Native 应用所需的必要工具。
Node
遵循 你的 Linux 发行版的安装说明 来安装 Node 18.18 或更高版本。
Java 开发工具包
React Native 目前推荐使用 Java SE Development Kit (JDK) 版本 17。使用更高版本的 JDK 可能会遇到问题。你可以从 AdoptOpenJDK 或你的系统包管理器下载并安装 OpenJDK。
Android 开发环境
如果你是 Android 开发的新手,设置开发环境可能会有些繁琐。如果你已经熟悉 Android 开发,可能有一些东西需要配置。无论哪种情况,请确保仔细遵循以下步骤。
1. 安装 Android Studio
下载并安装 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 SDK 可以通过 Android Studio 中的 SDK Manager 安装。
为此,打开 Android Studio,点击 "Configure" 按钮并选择 "SDK Manager"。
SDK Manager 也可以在 Android Studio "Settings" 对话框中找到,位于 Languages & Frameworks → Android SDK 下。
在 SDK Manager 中选择 "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" 条目,然后确保选择了 35.0.0 和 Android SDK Command-line Tools (latest)。
最后,点击 "Apply" 下载并安装 Android 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 的配置文件。
对于 bash 输入 source $HOME/.bash_profile 或对于 zsh 输入 source $HOME/.zprofile 将配置加载到当前 shell 中。通过运行 echo $ANDROID_HOME 验证 ANDROID_HOME 是否已设置,并通过运行 echo $PATH 验证适当的目录是否已添加到你的路径中。
请确保你使用正确的 Android SDK 路径。你可以在 Android Studio "Settings" 对话框中找到 SDK 的实际位置,位于 Languages & Frameworks → Android SDK 下。
Watchman
遵循 Watchman 安装指南 从源代码编译并安装 Watchman。
Watchman 是 Facebook 提供的一个用于监视文件系统变化的工具。强烈建议你安装它以获得更好的性能并在某些边缘情况下增加兼容性(翻译:你可能可以不安装这个也能凑合用,但效果因人而异;现在安装这个可能会让你以后省去麻烦)。
准备 Android 设备
你将需要一个 Android 设备来运行你的 React Native Android 应用。这可以是一个物理 Android 设备,或者更常见的是,你可以使用 Android 虚拟设备,它允许你在计算机上模拟一个 Android 设备。
无论哪种方式,你都需要准备设备以运行用于开发的 Android 应用。
使用物理设备
如果你有一个物理 Android 设备,你可以通过 USB 线将其连接到计算机并按照 此处 的说明,用它来代替 AVD 进行开发。
使用虚拟设备
如果你使用 Android Studio 打开 ./AwesomeProject/android,你可以通过打开 Android Studio 中的 "AVD Manager" 看到可用的 Android 虚拟设备 (AVDs) 列表。寻找一个看起来像这样的图标:
如果你最近安装了 Android Studio,你可能需要 创建一个新的 AVD。选择 "Create Virtual Device...",然后从列表中选择任意手机并点击 "Next",然后选择 VanillaIceCream API Level 35 镜像。
我们建议在系统上配置 VM 加速 以提高性能。遵循这些说明后,返回 AVD Manager。
点击 "Next" 然后点击 "Finish" 创建你的 AVD。此时你应该能够点击 AVD 旁边的绿色三角形按钮来启动它。
就是这样!
恭喜!你成功设置了开发环境。

接下来做什么?
- 如果你想将此新的 React Native 代码添加到现有应用中,请查看 集成指南。
- 如果你好奇想了解更多关于 React Native 的信息,请查看 React Native 介绍。