跳至主要内容

设置开发环境

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

注意

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

是否需要设置我的开发环境？

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

如果您存在无法使用框架的限制，或者您想编写自己的框架，那么设置本地环境是必需的。环境设置完成后，了解如何在 没有框架的情况下开始。

开发操作系统​

目标操作系统​

安装依赖项​

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

虽然您可以使用任何您选择的编辑器来开发您的应用，但您需要安装 Android Studio 以设置构建 React Native Android 应用所需的工具。

节点

按照 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 SDK
  • Android SDK 平台
  • Android 虚拟设备

然后，单击“下一步”以安装所有这些组件。

如果复选框呈灰色，您以后可以安装这些组件。

设置完成后，您将看到欢迎屏幕，请继续执行下一步。

2. 安装 Android SDK

Android Studio 默认安装最新的 Android SDK。但是，使用原生代码构建 React Native 应用需要 Android 14 (UpsideDownCake) SDK。可以通过 Android Studio 中的 SDK 管理器安装其他 Android SDK。

为此，请打开 Android Studio，单击“配置”按钮并选择“SDK Manager”。

SDK 管理器也可以在 Android Studio 的“设置”对话框中找到，位于 语言和框架 → Android SDK 下。

在 SDK 管理器中选择“SDK 平台”选项卡，然后选中右下角的“显示包详细信息”复选框。查找并展开 Android 14 (UpsideDownCake) 条目，然后确保选中以下项目

  • Android SDK 平台 34
  • Intel x86 Atom_64 System Image 或 Google APIs Intel x86 Atom System Image

接下来，选择“SDK 工具”选项卡，并在此处选中“显示包详细信息”复选框。查找并展开“Android SDK Build-Tools”条目，然后确保选中 34.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 特定配置文件。

键入 source $HOME/.bash_profile 用于 bash 或 source $HOME/.zprofile 以将配置加载到当前 shell 中。通过运行 echo $ANDROID_HOME 验证是否已设置 ANDROID_HOME，并通过运行 echo $PATH 验证是否已将相应的目录添加到您的路径中。

请确保您使用了正确的 Android SDK 路径。您可以在 Android Studio 的“设置”对话框中找到 SDK 的实际位置，位于 语言和框架 → Android SDK 下。

观察者

按照 Watchman 安装指南 从源代码编译和安装 Watchman。

Watchman 是 Facebook 用于监视文件系统更改的工具。强烈建议您安装它以获得更好的性能并在某些极端情况下提高兼容性（翻译：您可能可以在不安装此工具的情况下继续使用，但您的里程数可能会有所不同；现在安装它可以避免以后出现问题）。

准备 Android 设备

您将需要一个 Android 设备来运行您的 React Native Android 应用。这可以是物理 Android 设备，或者更常见的是，您可以使用 Android 虚拟设备，它允许您在计算机上模拟 Android 设备。

无论哪种方式，您都需要准备设备以运行用于开发的 Android 应用。

使用物理设备

如果您有物理 Android 设备，您可以通过 USB 线将其连接到计算机并按照 此处 的说明进行操作，在开发中使用它来代替 AVD。

使用虚拟设备

如果您使用 Android Studio 打开 ./AwesomeProject/android，您可以通过在 Android Studio 中打开“AVD 管理器”来查看可用 Android 虚拟设备 (AVD) 的列表。查找如下所示的图标

Android Studio AVD Manager

如果您最近安装了 Android Studio，您可能需要 创建一个新的 AVD。选择“创建虚拟设备...” ，然后从列表中选择任意一部手机并单击“下一步”，然后选择 UpsideDownCake API 级别 34 映像。

我们建议在您的系统上配置 虚拟机加速 以提高性能。按照这些说明操作后，请返回 AVD Manager。

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

就是这样！

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

接下来做什么？

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