跳到主要内容

配置你的环境

在本指南中，你将学习如何配置你的环境，以便你可以使用 Android Studio 和 Xcode 运行你的项目。这将允许你使用 Android 模拟器和 iOS 模拟器进行开发，在本地构建你的应用等等。

注意

本指南需要 Android Studio 或 Xcode。如果你已经安装了其中一个程序，你应该可以在几分钟内启动并运行。如果它们没有安装，你可能需要花费大约一个小时来安装和配置它们。

配置我的环境是必须的吗？

如果你正在使用 框架，则不需要配置你的环境。使用 React Native 框架，你无需设置 Android Studio 或 Xcode，因为框架会为你处理原生应用的构建。

如果你有约束阻止你使用框架，或者你想编写自己的框架，那么设置本地环境是必需的。环境设置完成后，学习如何在没有框架的情况下开始。

开发操作系统​

目标操作系统​

安装依赖项​

你将需要 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 Platform 35
  • Intel x86 Atom_64 System Image 或 Google APIs Intel x86 Atom System Image

接下来，选择“SDK 工具”选项卡，并在此处选中“显示软件包详细信息”旁边的框。查找并展开“Android SDK Build-Tools”条目，然后确保选中 35.0.0。

最后，单击“应用”以下载并安装 Android SDK 和相关的构建工具。

3. 配置 ANDROID_HOME 环境变量

React Native 工具需要设置一些环境变量，以便使用原生代码构建应用。

将以下行添加到你的 $HOME/.bash_profile 或 $HOME/.bashrc（如果你使用的是 zsh，则添加到 ~/.zprofile 或 ~/.zshrc）配置文件中

shell
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 Manager

如果你最近安装了 Android Studio，你可能需要创建一个新的 AVD。选择“创建虚拟机...”，然后从列表中选择任何手机并单击“下一步”，然后选择 VanillaIceCream API 级别 35 镜像。

我们建议在你的系统上配置 VM 加速以提高性能。一旦你按照这些说明进行操作，请返回到 AVD 管理器。

单击“下一步”，然后单击“完成”以创建你的 AVD。此时，你应该能够单击你的 AVD 旁边的绿色三角形按钮来启动它。

就这样！

恭喜你！你已成功设置你的开发环境。

接下来做什么？

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