Skip to main content

设置你的环境

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

¥In this guide, you'll learn how to set up your environment, so that you can run your project with Android Studio and Xcode. This will allow you to develop with Android emulators and iOS simulators, build your app locally, and more.

注意

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

¥This guide requires Android Studio or Xcode. If you already have one of these programs installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them.

Is setting up my environment required?

如果你使用的是 框架，则无需设置环境。使用 React Native 框架，你无需设置 Android Studio 或 XCode，因为框架会为你构建原生应用。

¥Setting up your environment is not required if you're using a Framework. With a React Native Framework, you don't need to setup Android Studio or XCode as a Framework will take care of building the native app for you.

如果你有阻止你使用框架的约束，或者你想编写自己的框架，则设置本地环境是必需的。设置环境后，了解如何 无需框架即可开始使用。

¥If you have constraints that prevent you from using a Framework, or you'd like to write your own Framework, then setting up your local environment is a requirement. After your environment is set up, learn how to get started without a framework.

开发操作系统​

¥Development OS

目标操作系统​

¥Target OS

安装依赖​

¥Installing dependencies

你将需要 Node、React Native 命令行接口、JDK 和 Android Studio。

¥You will need Node, the React Native command line interface, a JDK, and Android Studio.

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

¥While you can use any editor of your choice to develop your app, you will need to install Android Studio in order to set up the necessary tooling to build your React Native app for Android.

节点

按照 适用于你的 Linux 发行版的安装说明 安装 Node 18.18 或更新版本。

¥Follow the installation instructions for your Linux distribution to install Node 18.18 or newer.

Java 开发套件

React Native 目前推荐使用 Java SE 开发工具包 (JDK) 版本 17。使用更高版本的 JDK 可能会遇到问题。你可以从 AdoptOpenJDK 或你的系统打包程序下载并安装 OpenJDK。

¥React Native currently recommends version 17 of the Java SE Development Kit (JDK). You may encounter problems using higher JDK versions. You may download and install OpenJDK from AdoptOpenJDK or your system packager.

安卓开发环境

如果你是 Android 开发新手，那么设置开发环境可能会有些乏味。如果你已经熟悉 Android 开发，则可能需要配置一些内容。无论哪种情况，请务必仔细执行接下来的几个步骤。

¥Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.

1. 安装 Android Studio

下载并安装 Android Studio。在 Android Studio 安装向导中，确保选中以下所有项目旁边的框：

¥Download and install Android Studio. While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:

  • Android SDK

  • Android SDK Platform

  • Android Virtual Device

然后，单击 "下一个" 安装所有这些组件。

¥Then, click "Next" to install all of these components.

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

¥If the checkboxes are grayed out, you will have a chance to install these components later on.

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

¥Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.

2. 安装 Android SDK

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

¥Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 14 (UpsideDownCake) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.

为此，请打开 Android Studio，单击 "配置" 按钮并选择 "SDK 管理器"。

¥To do that, open Android Studio, click on "Configure" button and select "SDK Manager".

SDK 管理器还可以在 Android Studio "Settings" 对话框中的语言和框架 → Android SDK 下找到。

¥The SDK Manager can also be found within the Android Studio "Settings" dialog, under Languages & Frameworks → Android SDK.

从 SDK Manager 中选择 "SDK 平台" 选项卡，然后选中右下角 "显示包详情" 旁边的框。查找并展开 Android 14 (UpsideDownCake) 条目，然后确保选中以下项目：

¥Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 14 (UpsideDownCake) entry, then make sure the following items are checked:

  • Android SDK Platform 34

  • Intel x86 Atom_64 System Image 或 Google APIs Intel x86 Atom System Image

    ¥Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

接下来，选择 "SDK 工具" 选项卡并选中 "显示包详情" 旁边的框。查找并展开 "Android SDK 构建工具" 条目，然后确保选择 34.0.0。

¥Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that 34.0.0 is selected.

最后点击 "应用" 下载并安装 Android SDK 及相关构建工具。

¥Finally, click "Apply" to download and install the Android SDK and related build tools.

3. 配置 ANDROID_HOME 环境变量

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

¥The React Native tools require some environment variables to be set up in order to build apps with native code.

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

¥Add the following lines to your $HOME/.bash_profile or $HOME/.bashrc (if you are using zsh then ~/.zprofile or ~/.zshrc) config file:

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_profile is specific to bash. If you're using another shell, you will need to edit the appropriate shell-specific config file.

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

¥Type source $HOME/.bash_profile for bash or source $HOME/.zprofile to load the config into your current shell. Verify that ANDROID_HOME has been set by running echo $ANDROID_HOME and the appropriate directories have been added to your path by running echo $PATH.

请确保你使用正确的 Android SDK 路径。你可以在 Android Studio "Settings" 对话框中的语言和框架 → Android SDK 下找到 SDK 的实际位置。

¥Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Settings" dialog, under Languages & Frameworks → Android SDK.

守望者

按照 守望者安装指南 从源码编译并安装 Watchman。

¥Follow the Watchman installation guide to compile and install Watchman from source.

守望者 是 Facebook 的一个工具，用于监视文件系统的变化。强烈建议你安装它，以获得更好的性能并提高某些边缘情况下的兼容性（翻译：你可能可以在不安装它的情况下完成，但你的里程可能会有所不同；现在安装它可能会让你免于以后的头痛）。

¥Watchman is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance and increased compatibility in certain edge cases (translation: you may be able to get by without installing this, but your mileage may vary; installing this now may save you from a headache later).

准备 Android 设备

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

¥You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer.

无论哪种方式，你都需要准备设备来运行 Android 应用以进行开发。

¥Either way, you will need to prepare the device to run Android apps for development.

使用物理设备

如果你有物理 Android 设备，则可以使用它来代替 AVD 进行开发，方法是使用 USB 电缆将其插入计算机并按照说明进行操作 此处。

¥If you have a physical Android device, you can use it for development in place of an AVD by plugging it in to your computer using a USB cable and following the instructions here.

使用虚拟设备

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

¥If you use Android Studio to open ./AwesomeProject/android, you can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:

Android Studio AVD Manager

如果你最近安装了 Android Studio，则可能需要 创建一个新的 AVD。选择 "创建虚拟设备..."，然后从列表中选择任何调用并单击 "下一个"，然后选择 UpsideDownCake API 级别 34 图片。

¥If you have recently installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the UpsideDownCake API Level 34 image.

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

¥We recommend configuring VM acceleration on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

单击 "下一个"，然后单击 "结束" 创建你的 AVD。此时，你应该能够单击 AVD 旁边的绿色三角形按钮来启动它。

¥Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it.

就是这样！

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

¥Congratulations! You successfully set up your development environment.

怎么办？

  • 如果你想将这个新的 React Native 代码添加到现有应用中，请查看 集成指南。

    ¥If you want to add this new React Native code to an existing application, check out the Integration guide.

  • 如果你想了解有关 React Native 的更多信息，请查看 React Native 简介。

    ¥If you're curious to learn more about React Native, check out the Introduction to React Native.