跳到主要内容
版本:0.79

设置您的环境

在本指南中,您将学习如何设置环境,以便可以使用 Android Studio 和 Xcode 运行项目。这将使您能够使用 Android 模拟器和 iOS 模拟器进行开发,在本地构建应用,以及更多。

备注

本指南需要 Android Studio 或 Xcode。如果您已经安装了其中一个程序,您应该能够在几分钟内完成设置并运行。如果未安装,您预计需要花费大约一个小时来安装和配置它们。

是否需要设置我的环境?

如果您使用的是 框架,则不需要设置环境。使用 React Native 框架,您不需要设置 Android Studio 或 Xcode,因为它会为您处理原生应用的构建。

如果您有限制无法使用框架,或者想编写自己的框架,那么设置本地环境是必须的。环境设置完成后,学习如何 不使用框架开始

开发操作系统

目标操作系统

安装依赖

你需要 Node、React Native 命令行界面、JDK 和 Android Studio。

虽然你可以使用任何编辑器来开发应用,但你需要安装 Android Studio 以便设置必要的工具来构建你的 React Native Android 应用。

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 Platform
  • Android Virtual Device

然后,点击 "Next" 安装所有这些组件。

如果复选框呈灰色不可选,你稍后将有机会安装这些组件。

设置完成后,当你看到欢迎屏幕时,继续下一步。

2. 安装 Android SDK

Android Studio 默认安装最新的 Android SDK。然而,构建带有原生代码的 React Native 应用特别需要 Android 15 (VanillaIceCream) SDK。可以通过 Android Studio 中的 SDK Manager 安装额外的 Android SDK。

为此,打开 Android Studio,点击 "Configure" 按钮并选择 "SDK Manager"。

SDK Manager 也可以在 Android Studio 的 "Settings" 对话框中找到,位于 Languages & FrameworksAndroid SDK 下。

在 SDK Manager 中选择 "SDK Platforms" 选项卡,然后勾选右下角 "Show Package Details" 旁边的复选框。查找并展开 Android 15 (VanillaIceCream) 条目,然后确保选中以下项目:

  • Android SDK Platform 35
  • Intel x86 Atom_64 System ImageGoogle APIs Intel x86 Atom System Image

接下来,选择 "SDK Tools" 选项卡,并在此处也勾选 "Show Package Details" 旁边的复选框。查找并展开 "Android SDK Build-Tools" 条目,然后确保选中 35.0.0Android 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 的配置文件。

输入 source $HOME/.bash_profile(对于 bash)或 source $HOME/.zprofile 将配置加载到当前 shell 中。通过运行 echo $ANDROID_HOME 验证 ANDROID_HOME 是否已设置,并通过运行 echo $PATH 验证适当的目录是否已添加到你的路径中。

请确保你使用正确的 Android SDK 路径。你可以在 Android Studio 的 "Settings" 对话框中找到 SDK 的实际位置,位于 Languages & FrameworksAndroid 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 Manager" 查看可用的 Android 虚拟设备 (AVD) 列表。寻找看起来像这样的图标:

Android Studio AVD 管理器

如果你最近安装了 Android Studio,你可能需要 创建一个新的 AVD。选择 "Create Virtual Device...",然后从列表中选择任意 Phone 并点击 "Next",然后选择 VanillaIceCream API Level 35 镜像。

我们建议在系统上配置 VM 加速 以提高性能。遵循这些说明后,返回 AVD Manager。

点击 "Next" 然后点击 "Finish" 创建你的 AVD。此时你应该能够点击 AVD 旁边的绿色三角形按钮来启动它。

就是这样!

恭喜!你成功设置了开发环境。

接下来做什么?

  • 如果你想将此新的 React Native 代码添加到现有应用中,请查看 集成指南
  • 如果你想了解更多关于 React Native 的信息,请查看 React Native 简介