配置您的环境
在本指南中,您将学习如何设置您的环境,以便您可以使用 Android Studio 和 Xcode 运行您的项目。 这将允许您使用 Android 模拟器和 iOS 模拟器进行开发,在本地构建您的应用等等。
本指南需要 Android Studio 或 Xcode。 如果您已经安装了其中一个程序,您应该可以在几分钟内启动并运行。 如果它们未安装,您应该预计花费大约一个小时来安装和配置它们。
设置我的环境是必须的吗?
如果您正在使用 框架,则不需要设置您的环境。 使用 React Native 框架,您无需设置 Android Studio 或 XCode,因为框架将负责为您构建原生应用。
如果您有约束阻止您使用框架,或者您想编写自己的框架,则设置本地环境是必需的。 设置好环境后,学习如何在没有框架的情况下开始。
开发操作系统
- macOS
- Windows
- Linux
目标操作系统
- Android
- iOS
安装依赖项
您将需要 Node、Watchman、React Native 命令行界面、JDK 和 Android Studio。
虽然您可以使用您选择的任何编辑器来开发您的应用,但您需要安装 Android Studio 以设置必要的工具来为 Android 构建您的 React Native 应用。
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
# Get path to where cask was installed to find the JDK installer
brew info --cask zulu@17
# ==> zulu@17: <version number>
# https://www.azul.com/downloads/
# Installed
# /opt/homebrew/Caskroom/zulu@17/<version number> (185.8MB) (note that the path is /usr/local/Caskroom on non-Apple Silicon Macs)
# Installed using the formulae.brew.sh API on 2024-06-06 at 10:00:00
# Navigate to the folder
open /opt/homebrew/Caskroom/zulu@17/<version number> # or /usr/local/Caskroom/zulu@17/<version number>
打开 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 SDK
Android SDK 平台
Android 虚拟机
然后,单击“下一步”以安装所有这些组件。
如果复选框灰显,您稍后将有机会安装这些组件。
安装程序完成后,当您看到欢迎屏幕时,请继续执行下一步。
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 平台 35
Intel x86 Atom_64 System Image
或Google APIs Intel x86 Atom System Image
或(对于 Apple M1 芯片)Google APIs ARM 64 v8a System Image
接下来,选择“SDK 工具”选项卡,并在此处选中“显示软件包详细信息”旁边的框。 查找并展开“Android SDK 构建工具”条目,然后确保选中 35.0.0
。
最后,单击“应用”以下载并安装 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 “设置”对话框中的 语言和框架 → Android SDK 下找到 SDK 的实际位置。
准备 Android 设备
您将需要一个 Android 设备来运行您的 React Native Android 应用。 这可以是物理 Android 设备,或者更常见的是,您可以使用 Android 虚拟机,它允许您在计算机上模拟 Android 设备。
无论哪种方式,您都需要准备设备以运行用于开发的 Android 应用。
使用物理设备
如果您有物理 Android 设备,则可以使用它代替 AVD 进行开发,方法是将它通过 USB 电缆插入计算机并按照此处的说明进行操作。
使用虚拟机
如果您使用 Android Studio 打开 ./AwesomeProject/android
,您可以通过从 Android Studio 中打开“AVD 管理器”来查看可用 Android 虚拟机 (AVD) 的列表。 寻找看起来像这样的图标
如果您最近安装了 Android Studio,您可能需要创建一个新的 AVD。 选择“创建虚拟机...”,然后从列表中选择任何手机并单击“下一步”,然后选择 VanillaIceCream API 级别 35 镜像。
单击“下一步”,然后单击“完成”以创建您的 AVD。 此时,您应该能够单击 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,请确保它是 Node 18.18 或更高版本。
Watchman 是 Facebook 开发的一个用于监视文件系统更改的工具。 强烈建议您安装它以获得更好的性能。
Xcode
请使用 最新版本 的 Xcode。
安装 Xcode 的最简单方法是通过 Mac App Store。 安装 Xcode 也会安装 iOS 模拟器和构建 iOS 应用所需的所有必要工具。
命令行工具
您还需要安装 Xcode 命令行工具。 打开 Xcode,然后从 Xcode 菜单中选择 设置...(或偏好设置...)。 转到“位置”面板,并通过在“命令行工具”下拉列表中选择最新版本来安装这些工具。
在 Xcode 中安装 iOS 模拟器
要安装模拟器,请打开 Xcode > 设置...(或偏好设置...),然后选择 平台(或组件) 选项卡。 选择具有您希望使用的 iOS 对应版本的模拟器。
如果您使用的是 Xcode 14.0 或更高版本来安装模拟器,请打开 Xcode > 设置 > 平台 选项卡,然后单击“+”图标并选择 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
版本管理器自定义此变量。
最重要的是,可以添加任何其他环境变量,并在您的构建脚本阶段中获取 .xcode.env
文件。 如果您需要运行需要某些特定环境的脚本,这是建议的方法:它允许将构建阶段与特定环境解耦。
就这样!
恭喜! 您已成功设置您的开发环境。

接下来做什么?
- 如果您想将此新的 React Native 代码添加到现有应用程序,请查看集成指南。
- 如果您想了解更多关于 React Native 的信息,请查看React Native 简介。
目标操作系统
- Android
- iOS
安装依赖项
您将需要 Node、React Native 命令行界面、JDK 和 Android Studio。
虽然您可以使用您选择的任何编辑器来开发您的应用,但您需要安装 Android Studio 以设置必要的工具来为 Android 构建您的 React Native 应用。
Node, JDK
我们建议通过 Chocolatey 安装 Node,Chocolatey 是 Windows 上流行的软件包管理器。
建议使用 Node 的 LTS 版本。 如果您希望能够在不同版本之间切换,您可能希望通过 nvm-windows 安装 Node,nvm-windows 是 Windows 的 Node 版本管理器。
React Native 也需要 Java SE 开发工具包 (JDK),也可以使用 Chocolatey 安装它。
打开管理员命令提示符(右键单击命令提示符并选择“以管理员身份运行”),然后运行以下命令
choco install -y nodejs-lts microsoft-openjdk17
如果您已经在系统上安装了 Node,请确保它是 Node 18 或更高版本。 如果您已经安装了 JDK,我们建议使用 JDK17。 使用更高版本的 JDK 可能会遇到问题。
您可以在 Node 下载页面上找到其他安装选项。
如果您使用的是最新版本的 Java 开发工具包,则需要更改项目的 Gradle 版本,以便它可以识别 JDK。 您可以通过转到
{项目根文件夹}\android\gradle\wrapper\gradle-wrapper.properties
并更改distributionUrl
值来升级 Gradle 版本。 您可以在此处查看 Gradle 的最新版本。
Android 开发环境
如果您是 Android 开发新手,那么设置您的开发环境可能会有些繁琐。 如果您已经熟悉 Android 开发,则可能需要配置一些事项。 在任何情况下,请务必仔细遵循接下来的几个步骤。
1. 安装 Android Studio
下载并安装 Android Studio。 在 Android Studio 安装向导中,确保选中以下所有项目旁边的框
Android SDK
Android SDK 平台
Android 虚拟机
- 如果您尚未使用 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 平台 35
Intel x86 Atom_64 System Image
或Google APIs Intel x86 Atom System Image
接下来,选择“SDK 工具”选项卡,并在此处选中“显示软件包详细信息”旁边的框。 查找并展开 Android SDK 构建工具
条目,然后确保选中 35.0.0
。
最后,单击“应用”以下载并安装 Android SDK 和相关的构建工具。
3. 配置 ANDROID_HOME 环境变量
React Native 工具需要设置一些环境变量才能构建带有原生代码的应用。
- 打开 Windows 控制面板。
- 单击 用户帐户, 然后再次单击 用户帐户
- 单击 更改我的环境变量
- 单击 新建... 以创建一个新的
ANDROID_HOME
用户变量,该变量指向您的 Android SDK 的路径
SDK 默认安装在以下位置
%LOCALAPPDATA%\Android\Sdk
您可以在 Android Studio “设置”对话框中的 语言和框架 → Android SDK 下找到 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 管理器”来查看可用 Android 虚拟机 (AVD) 的列表。 寻找看起来像这样的图标
如果您最近安装了 Android Studio,您可能需要创建一个新的 AVD。 选择“创建虚拟机...”,然后从列表中选择任何手机并单击“下一步”,然后选择 VanillaIceCream API 级别 35 镜像。
如果您没有安装 HAXM,请单击“安装 HAXM”或按照这些说明进行设置,然后返回到 AVD 管理器。
单击“下一步”,然后单击“完成”以创建您的 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 开发工具包 (JDK) 的版本 17。 使用更高版本的 JDK 可能会遇到问题。 您可以从 AdoptOpenJDK 或您的系统软件包管理器下载并安装 OpenJDK。
Android 开发环境
如果您是 Android 开发新手,那么设置您的开发环境可能会有些繁琐。 如果您已经熟悉 Android 开发,则可能需要配置一些事项。 在任何情况下,请务必仔细遵循接下来的几个步骤。
1. 安装 Android Studio
下载并安装 Android Studio。 在 Android Studio 安装向导中,确保选中以下所有项目旁边的框
Android SDK
Android SDK 平台
Android 虚拟机
然后,单击“下一步”以安装所有这些组件。
如果复选框灰显,您稍后将有机会安装这些组件。
安装程序完成后,当您看到欢迎屏幕时,请继续执行下一步。
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 平台 35
Intel x86 Atom_64 System Image
或Google APIs Intel x86 Atom System Image
接下来,选择“SDK 工具”选项卡,并在此处选中“显示软件包详细信息”旁边的框。 查找并展开“Android SDK 构建工具”条目,然后确保选中 35.0.0
。
最后,单击“应用”以下载并安装 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
或 source $HOME/.zprofile
以将配置加载到当前 shell 中。 通过运行 echo $ANDROID_HOME
验证是否已设置 ANDROID_HOME,并通过运行 echo $PATH
验证是否已将适当的目录添加到您的路径中。
请确保您使用正确的 Android SDK 路径。 您可以在 Android Studio “设置”对话框中的 语言和框架 → Android SDK 下找到 SDK 的实际位置。
Watchman
按照Watchman 安装指南从源代码编译和安装 Watchman。
Watchman 是 Facebook 开发的一个用于监视文件系统更改的工具。 强烈建议您安装它以获得更好的性能和提高在某些极端情况下的兼容性(翻译:您可能可以在不安装它的情况下完成工作,但您的效果可能会有所不同;现在安装它可以避免以后出现头痛)。
准备 Android 设备
您将需要一个 Android 设备来运行您的 React Native Android 应用。 这可以是物理 Android 设备,或者更常见的是,您可以使用 Android 虚拟机,它允许您在计算机上模拟 Android 设备。
无论哪种方式,您都需要准备设备以运行用于开发的 Android 应用。
使用物理设备
如果您有物理 Android 设备,则可以使用它代替 AVD 进行开发,方法是将它通过 USB 电缆插入计算机并按照此处的说明进行操作。
使用虚拟机
如果您使用 Android Studio 打开 ./AwesomeProject/android
,您可以通过从 Android Studio 中打开“AVD 管理器”来查看可用 Android 虚拟机 (AVD) 的列表。 寻找看起来像这样的图标
如果您最近安装了 Android Studio,您可能需要创建一个新的 AVD。 选择“创建虚拟机...”,然后从列表中选择任何手机并单击“下一步”,然后选择 VanillaIceCream API 级别 35 镜像。
我们建议在您的系统上配置 VM 加速以提高性能。 完成这些说明后,返回到 AVD 管理器。
单击“下一步”,然后单击“完成”以创建您的 AVD。 此时,您应该能够单击 AVD 旁边的绿色三角形按钮来启动它。
就这样!
恭喜! 您已成功设置您的开发环境。

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