# React Native

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt).

> **TL;DR**
> 仅在 IntelliJ IDEA Ultimate 订阅中提供： [下载](https://www.jetbrains.com/zh-cn/idea/download/)试用或 [探索功能](https://www.jetbrains.com/zh-cn/products/compare/?product=idea&product=idea-ult)。
>
>
>
> 所需插件  :
>
>
>
> `JavaScript 和 TypeScript` 、  `JavaScript Debugger` ：这些插件与 IntelliJ IDEA 捆绑在一起，并默认启用。

使用  React Native 与 JavaScript 和 React 开发 iOS 和 Android 的原生移动应用程序。 由 Facebook 创建，并被 Instagram、Airbnb 以及现在 JetBrains 自家的 [YouTrack mobile](https://blog.jetbrains.com/youtrack/2016/11/introducing-youtrack-mobile/) 应用程序使用。 从 [React Native 官方网站](https://reactnative.dev/) 了解更多信息。

IntelliJ IDEA 帮助您创建、编辑、lint、运行和维护您的 React Native 应用程序。 IntelliJ IDEA 还提供 React 和 Flow 符号的代码补全。

## 开始之前

Procedure:

1. 请确保您的计算机上安装了 [Node.js](http://nodejs.org/)。

2. 请确保已在设置中启用  JavaScript 和 TypeScript  插件。 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))打开设置，然后选择  `插件` 。 在搜索字段中，键入  JavaScript 和 TypeScript 。 有关插件的更多信息，请参阅 [管理插件](managing-plugins.html)。

3. 请确保在设置中已启用  JavaScript 调试器  捆绑插件。 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))打开设置，然后选择  `插件` 。 在搜索字段中，输入  JavaScript 调试器 。 有关插件的更多信息，请参阅 [管理插件](managing-plugins.html)。

## 创建一个新的 React Native 应用程序

在 IntelliJ IDEA 中创建 React Native 应用程序的推荐方法是使用专用项目生成器，例如 [React Native CLI](https://reactnative.dev/docs/getting-started)。

Procedure:

1. 从主菜单中选择  `文件 | 新建 | 项目` ，或者在   %instance% 主页   屏幕上点击  `新建 | 项目` 。

2. 在   新建项目   对话框的左侧窗格中，选择   React  。

3. 在向导的右侧部分，指定项目名称和创建该项目的文件夹。

4. 在   项目类型  区域，选择   React Native  。

在   Node.js 运行时   字段中，指定要使用的 Node.js 运行时。 从列表中选择一个已配置的运行时，或选择   添加   以配置新的运行时。

从   React Native   列表中选择   npx --package react-native-cli react-native  。

或者，对于 npm 版本 5.1 及更早版本，请在   终端   `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS)) 中运行  `npm install -g react-native-cli` ，自行安装  `react-native-cli`  包。 创建应用程序时，选择存储  `react-native-cli`  包的文件夹。

5. 点击   创建  后，IntelliJ IDEA会生成一个  React Native 专用项目，包含所有必需的配置文件，下载依赖项，并创建一个类型为  React Native 的运行配置，使用默认设置。。

6. 安装其他工具以开始使用 React Native，例如 [iOS 模拟器](#ws_react_native_prepare_ios_simulator)。 这些工具的列表取决于您的操作系统以及应用程序要面向的移动平台。 有关详细的安装说明，请参阅 [React Native 入门指南](https://reactnative.dev/docs/getting-started)。

### 创建一个使用 Expo 的 React Native 应用程序

使用 IntelliJ IDEA，还可以结合 [Expo 框架](https://expo.dev/)开发全栈 React Native 应用程序。

> **Warning:**
> 暂不支持调试使用 Expo 的应用程序。

Procedure:

1. 打开你的命令行 shell 或内嵌   终端  （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))）。

2. 切换到您希望创建应用程序的上级文件夹。 为此，请输入：

```SHELL
cd <parent_folder>

```

3. 若要开始生成应用程序，请输入：

```SHELL
npx create-expo-app@latest <application name>

```

4. 回答向导中的问题。 例如，接受安装  `create-expo -app`  软件包的建议，或选择要使用的 [Expo SDK 版本](https://docs.expo.dev/versions/latest/)。

![创建 Expo 应用](https://resources.jetbrains.com/help/img/idea/2026.3/ws_react_native_create_app_expo.png)

## 从现有的 React Native 应用程序开始

要继续开发现有的 React Native 应用程序，请在 IntelliJ IDEA 中打开它并下载所需的依赖项。

Procedure: 打开本机上已有的应用程序源代码

* 点击   打开或导入   屏幕上的   欢迎   或从主菜单中选择  `文件 | 打开` 。 在打开的对话框中，选择存储源文件的文件夹。

Procedure: 从版本控制系统检出应用程序源代码

1. 在   欢迎   屏幕上点击   克隆存储库  。

或者，从主菜单中选择  `文件 | 新建 | 从版本控制创建项目…` 、  `Git | 克隆…`  或  `VCS | 从版本控制获取` 。

在主菜单中，可能会看到与项目关联的其他任何版本控制系统，而不是   Git  。 例如，   Mercurial   或   Perforce  。

2. 在打开的对话框中，从列表中选择版本控制系统，并指定要从中检出应用程序源代码的仓库。 有关更多信息，请参阅 [检出项目（克隆）](manage-projects-hosted-on-github.html#clone-from-GitHub)。

Procedure: 下载依赖项

* 在弹出窗口中点击   运行 'npm install'   或   运行 'yarn install'  ：

![打开应用程序并下载依赖项](https://resources.jetbrains.com/help/img/idea/2026.3/react_native_npm_yarn_package_run_npm_install.png)

您可以使用 [npm](https://docs.npmjs.com/)、 [Yarn 1](https://classic.yarnpkg.com/lang/en/) 或 [Yarn 2](https://yarnpkg.com/)，详情请参阅 [npm 和 Yarn](installing-and-removing-external-software-using-node-package-manager.html)。

* 或者，在编辑器中或在   项目   工具窗口（ `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))）中，从  `package.json`  的上下文菜单中选择   运行 'npm install'   或   运行 'yarn install'  。

Procedure: 从项目中排除 android 和 iOS 文件夹

1. 在   项目   工具窗口（ `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))）中，选择   android   或   iOS 系统   文件夹。

2. 从选择的上下文菜单中，选择   标记目录为  ，然后选择   已排除  。

![标记 IOS 文件夹为排除](https://resources.jetbrains.com/help/img/idea/2026.3/ws_react_native_mark_as_excluded.png)

安装其他工具以开始使用 React Native，例如 [iOS 模拟器](#ws_react_native_prepare_ios_simulator)。 这些工具的列表取决于您的操作系统以及应用程序要面向的移动平台。 有关详细的安装说明，请参阅 [React Native 入门指南](https://reactnative.dev/docs/getting-started)。

### 项目安全

打开在 IntelliJ IDEA 外部创建并导入其中的项目时，IntelliJ IDEA 会显示一个对话框，可在其中决定如何处理此包含不熟悉源代码的项目。

请选择以下选项之一：

* 在安全模式中预览 ：在这种情况下，IntelliJ IDEA 以预览模式打开项目。 这意味着您可以浏览项目的源代码，但无法运行任务和脚本，也无法运行您的项目。 IntelliJ IDEA 会在编辑器区域顶部显示一条通知，可以点击 信任项目… 链接随时加载项目。

* 信任项目 ：在这种情况下，IntelliJ IDEA 会打开并加载一个项目。 这意味着项目已初始化，项目的插件已解析，依赖项已添加，并且所有 IntelliJ IDEA 功能都可用。

* 不打开 ：在这种情况下，IntelliJ IDEA 不会打开项目。

有关更多信息，请参阅 [项目安全](project-security.html)。

> **Tip:**
> 从欢迎屏幕或通过  `文件 | 新建 | 项目`  创建的项目会被自动视为受信任。

## 编码辅助

IntelliJ IDEA 在 JavaScript 代码中为 React API 和 [JSX](https://reactjs.org/docs/introducing-jsx.html) 提供代码补全功能。 代码补全适用于 React 方法、特定于 React 的特性、HTML 标记和组件名称、 [React 事件](https://facebook.github.io/react/docs/events.html#supported-events)、组件属性等。 请参阅 [React：完成代码](react.html#react_code_completion)以获取更多信息。

React Native StyleSheet 属性的代码补全功能也可用：

![React Native StyleSheet 属性的补全](https://resources.jetbrains.com/help/img/idea/2026.3/ws_react_native_style_sheet_properties_completion.png)

如果在项目中使用 Flow，IntelliJ IDEA 可以在编辑器中高亮显示此类型检查器报告的错误。 如需更多信息，请参阅 [在 IntelliJ IDEA 中配置 Flow](using-the-flow-type-checker.html#ws_js_configure_flow)和 [在 WebStorm 中使用 Flow](https://blog.jetbrains.com/webstorm/2016/11/using-flow-in-webstorm/)。

## 运行 React Native 应用程序

您可以在物理设备或模拟器上运行您的应用程序。 在启动应用程序之前，请确保模拟器已经在运行，或者如果您正在使用物理设备，请确保它已连接到您的计算机。

IntelliJ IDEA 让运行 React Native 应用程序变得灵活。 例如，如果您第一次启动应用程序，可以选择运行 React Native bundler、构建应用程序并在模拟器上打开它——这些都作为运行会话的一部分。 您也可以跳过启动 bundler ，如果它已在运行中，或者拒绝构建应用程序，如果自上次运行以来您未对其原生代码进行任何更改。

### 创建 React Native 运行配置

![React Native 运行配置](https://resources.jetbrains.com/help/img/idea/2026.3/ws_react_native_debug_config_build_and_launch_before_launch_task.png)

Procedure:

1. 从工具栏上的   运行/调试配置   微件中选择   编辑配置  ，点击   添加新配置   按钮（ ![添加新配置按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)），然后从列表中选择   React Native   以打开 [配置设置](null)。

![开始创建运行/调试配置](https://resources.jetbrains.com/help/img/idea/2026.3/createRunDebugConfig_Start.animated.gif)

2. 选择是否希望 IntelliJ IDEA 为您构建和启动应用程序：

* 如果这是首次启动应用程序或自上次运行以来已更新其本机代码，请选中 构建和启动 复选框。

* 如果自上次构建以来未对应用程序的原生代码进行任何更改，请清除此复选框。

3. 如果您选中了   构建和启动  复选框，请选择目标平台，Android 或 iOS。

根据您的选择，IntelliJ IDEA 将使用  `react-native run-ios`  或  `react-native run-android`  来运行 bundler。

* 要模拟 安卓 平台，请使用 Android 虚拟设备 。

* 要模拟 iOS 系统 平台，您需要全局安装 ios-sim command-line tool 。 您可以通过 Node Package Manager (npm) ，参考 [npm、pnpm 和 Yarn](installing-and-removing-external-software-using-node-package-manager.html)，或者根据您的操作系统运行 `sudo npm install ios-sim -g` 命令来完成。

请从 [React Native 官方网站](https://reactnative.dev/docs/environment-setup)了解详情。

可选地，在   参数   字段中，输入要传递给  React Native  的参数，例如，通过  `‑‑simulator`  标志指定模拟器类型：  `‑‑simulator="iPhone 4s"` 。

4. 指定要使用的浏览器。

5. 在   打包器主机  字段中，指定运行 React Native bundler 的主机，默认值为   本地主机  。

6. 在   打包器端口  字段中，指定 React Native bundler 运行的端口，默认选择  `8081` ，从 [React Native 官方网站](https://reactnative.dev/docs/troubleshooting#port-already-in-use)了解更多信息。

7. 指定要使用的 Node.js 运行时。

如果您选择   项目   别名， IntelliJ IDEA 将自动使用在 [JavaScript 运行时](javascript-runtime.html) 页面上   Node.js 运行时   字段中的项目默认解释器。 在大多数情况下， IntelliJ IDEA 会检测到项目的默认运行时，并自动填写该字段。

您还可以选择其他已配置的本地或远程解释器，或点击 ![浏览按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.ellipsis.svg) 并配置一个新的解释器。

8. 指定应用程序的  `react-native-cli` 路径和 [工作目录](http://en.wikipedia.org/wiki/Working_directory)。 如果需要，输入  `react-native run-android`  或  `react-native run-ios`  的环境变量。

9. 默认情况下，当您调用运行配置时，IntelliJ IDEA 会自动启动 React Native 打包器。

如果您已经在 IntelliJ IDEA 之外启动了 bundler，例如，从命令行启动，您可以在不停止和重新启动的情况下重复使用它。 在   启动前  区域选择您的 bundler 并点击 ![移除](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.remove.svg)。

![从 Before Launch 移除 bundler](https://resources.jetbrains.com/help/img/idea/2026.3/调试配置](run-debug-configuration.html)。

### 准备设备或模拟器

如果您使用的是 Android 设备，每次开始使用应用程序时都需要准备它。

iOS模拟器只需安装一次，之后 IntelliJ IDEA 会自动启动它  `react-native run-ios` 。

Procedure:

* 要准备 Android 设备，请启动 [Android 虚拟设备](https://reactnative.dev/docs/environment-setup)或通过 USB 连接实际 Android 设备。

请从 [React Native 官方网站](https://reactnative.dev/docs/running-on-device#running-your-app-on-android-devices)了解详情。

* 要准备 iOS 模拟器，请打开命令行 shell 或嵌入的   终端  （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))），然后输入：

`npm install --global ios-sim`

### 运行应用程序

在工具栏的   运行/调试配置   小部件列表中，选择新创建的   React Native   配置，然后点击其旁边的 ![运行按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.run.run.svg)。 IntelliJ IDEA 打开   运行  工具窗口，并首先在新的   React Native  标签页中启动 React Native bundler。

之后，将根据所选目标平台执行  `react-native run-ios`  或  `react-native run-android`  命令。 如果构建成功，模拟器将显示您的应用程序：

![React Native 打包程序正在运行](https://resources.jetbrains.com/help/img/idea/2026.3/ws_react_native_packager_running.png)

## See also

### 语言和框架特定指南

[React](react.html) [JavaScript](javascript-specific-guidelines.html) [TypeScript](typescript-support.html) [配置 JavaScript 库](configuring-javascript-libraries.html)

### 参考

[JavaScript](settings-languages-javascript.html)

### 外部链接

[Working with React in WebStorm: Coding Assistance](http://blog.jetbrains.com/webstorm/2015/10/working-with-reactjs-in-webstorm-coding-assistance/)