GoLand 2025.2 Help

React Native

使用 React Native ，您可以使用 JavaScript 和 React 来开发适用于 iOS 和 Android 的原生移动应用。 它由 Facebook 创建，并被 Instagram、Airbnb 以及现在 JetBrains 自有的 YouTrack mobile 应用等知名应用所使用。 详细信息请参见 React Native 官方网站。

GoLand 可帮助您创建、编辑、代码检查、运行、调试和维护 React Native 应用。 GoLand 还为 React 和 Flow 符号提供代码补全。

开始之前

  1. 请确保您的计算机上已安装 Node.js。

  2. 请确保在 设置 | 插件 页面、“ 已安装 ”标签页中启用了所需插件 JavaScript and TypeScript 与 JavaScript Debugger。 如需了解更多信息，请参阅 插件管理。

创建新的 React Native 应用

在 GoLand 中创建 React Native 应用的推荐方式是使用专用的项目生成器，例如 React Native CLI。

  1. 从主菜单中选择 文件 | 新建 | 项目 ，或点击 新建项目 按钮，在 欢迎 屏幕上。

  2. In the 新建项目 dialog, select React in the left-hand pane.

  3. 在向导窗口右侧部分，指定项目名称以及创建位置的文件夹。

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

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

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

    或者，对于 npm 5.1 及更早版本，请通过在 终端 Alt+F12 中运行 npm install -g react-native-cli 安装 react-native-cli 包。 创建应用时，选择存储 react-native-cli 包的文件夹。

  5. 单击 创建 后，GoLand 会生成一个特定于 React Native 的项目，包含所有必需配置文件，下载依赖项，并创建一个类型为 React Native 的运行/调试配置，采用默认设置。

  6. 安装其他工具以开始使用 React Native，例如一个 iOS 模拟器。 这些工具的列表取决于您的操作系统以及应用面向的平台。 有关详细的安装说明，请参阅 React Native 入门指南。

使用现有 React Native 应用开始

若要继续开发已有的 React Native 应用，请在 GoLand 中打开它并下载所需的依赖项。

打开已经在本机上的应用源代码

  • 在 欢迎 屏幕上单击 打开 ，或从主菜单中选择 文件 | 打开。 在打开的对话框中，选择存储源代码的文件夹。

从版本控制中检出应用源代码

  1. 在 欢迎 屏幕上单击 克隆。

    或者，从主菜单中选择 Git | 克隆… 或 版本控制 | 从版本控制系统获取。

    在主菜单中，您可能会看到与项目相关联的其他版本控制系统名称，替代 Git。 例如， Mercurial 或 Perforce。

    check_out_from_vcs

下载依赖项

  • 在弹出窗口中点击 运行 'npm install' 或 运行 'yarn install'。

    打开应用并下载依赖项

    您可以使用 npm、 Yarn 1 或 Yarn 2 ，具体信息请参阅 npm 和 Yarn。

  • Alternatively, select 运行 'npm install' or 运行 'yarn install' from the context menu of package.json in the editor or in the 项目 tool window Alt+1.

    打开 Angular 应用并从 package.json 中下载依赖项

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

  1. 在 项目 工具窗口中 Alt+1 ，选择 android 或 iOS 文件夹。

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

    将 IOS 文件夹标记为已排除

项目安全性

当您打开一个在 GoLand 之外创建并被导入到其中的项目时，GoLand 会显示一个对话框，您可以在其中决定如何处理该含有不熟悉源代码的项目。

不受信任的项目警告

请选择以下选项之一：

  • 安全模式下预览 ：在此情况下，GoLand 以预览模式打开项目。 这意味着您可以浏览项目源代码，但无法运行任务和脚本，也无法运行或调试项目。

    GoLand 会在编辑区域顶部显示通知，您随时可以点击 信任项目… 链接加载您的项目。

  • 信任项目 ：在此情况下，GoLand 会打开并加载项目。 这意味着项目已初始化、插件已解析、依赖项已添加，所有 GoLand 功能均可用。

  • 不打开 ：在此情况下，GoLand 不会打开项目。

请参阅 项目安全 了解详细信息。

编码辅助

GoLand 提供对 React API 和 JavaScript 代码中的 JSX 的代码补全支持。 代码补全支持 React 方法、React 特定属性、HTML 标签和组件名称、 React events 、组件属性等。 欲了解更多信息，请参阅 React：代码补全。

也支持 React Native StyleSheet 属性的代码补全：

React Native StyleSheet 属性的代码补全

如果您的项目中使用了 Flow，GoLand 可在编辑器中突出显示该类型检查器检测到的错误。 有关详细信息，请参阅 在 GoLand 中配置 Flow 和 在 WebStorm 中使用 Flow。

运行和调试 React Native 应用

您可以在实体设备或模拟器上运行和调试您的应用程序。 在启动应用程序之前，请确保模拟器已运行，或者如果使用的是实体设备，设备已连接到您的计算机。

GoLand 使运行和调试 React Native 应用程序变得非常灵活。 例如，如果您是首次启动应用程序，可以选择运行 React Native bundler、构建应用程序并在模拟器中打开它——这些操作都作为运行或调试会话的一部分完成。 如果 bundler 已运行，您还可以跳过其启动；如果自上次运行以来未更改本机代码，您也可以跳过应用程序构建。

创建 React Native 运行/调试配置

  1. 在工具栏的 运行/调试配置 小部件中选择 编辑配置 ，点击 添加新配置 按钮（“添加新配置”按钮 ），然后从列表中选择 React Native 以打开 配置设置。

    开始创建运行/调试配置

  2. 选择是否由 GoLand 为您构建并启动应用程序：

    • 如果您是首次启动应用程序或自上次运行后更新了本机代码，请选中 构建并启动 复选框。

    • Clear this checkbox if you haven't made any changes to the native code of your application since the last build. 启动调试后，GoLand 会等待您在启用远程调试功能的情况下，在模拟器中打开应用程序，具体说明请参阅 React Native 官方网站

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

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

    • 要模拟 Android 平台，请使用 Android 虚拟设备。

    • 要模拟 iOS 平台，您需要全局安装 ios-sim 命令行工具。 您可以通过 Node Package Manager（npm） 安装，或根据操作系统运行 sudo npm install ios-sim -g 命令。

    详细信息请参阅 React Native 官方网站。

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

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

    在调试 React Native 应用程序时，GoLand 依赖 React Native 自身使用的 Chrome 运行时。 您也可以将 DevTools 与 GoLand 一起使用。 启动调试会话时，GoLand 会启动一个新的 Chrome 实例并附加到它上面。

  5. 在 Bundler 主机 字段中指定运行 React Native bundler 的主机，默认值为 localhost。

  6. 在 Bundler 端口 字段中指定 React Native bundler 运行所使用的端口，默认选择 8081 ，详细信息请参阅 React Native 官方网站。

  7. 请指定要使用的 Node.js 解释器。

    如果选择 项目 别名，GoLand 将自动使用 Node 解释器 字段中项目默认的解释器。 在大多数情况下，GoLand 会检测到项目的默认解释器并自动填充该字段。

    您还可以选择其他已配置的本地解释器，或点击 “浏览”按钮 并配置新的解释器。

  8. 请指定 react-native-cli 的路径和应用程序的 工作目录。 可选地，输入传递给 react-native run-android 或 react-native run-ios 的环境变量。

  9. By default, GoLand starts the React Native bundler automatically when you invoke the run/debug configuration. 如果您已经在 GoLand 外部（例如通过命令行）启动了 bundler，您可以在无需停止或重新启动的情况下重复使用它。 在 启动前 区域中选择您的 bundler，然后单击 移除。

React Native 运行/调试配置

有关所有运行／调试配置通用设置的详细信息，请参阅 运行／调试配置。

准备设备或模拟器

如果您使用的是 Android 设备，则每次开始使用应用时都需要对其进行准备。

iOS 模拟器仅需安装一次，之后 GoLand 会自动通过 react-native run-ios 启动它。

  • 要准备 Android 设备，请启动 Android 虚拟设备 ，或启用通过 USB 的调试，并通过 USB 连接到物理 Android 设备。

    详细信息请访问 React Native 官方网站。

  • 要准备 iOS 模拟器，请打开集成的 终端 （Alt+F12 ），然后输入：

    npm install --global ios-sim

运行应用

在工具栏上的 运行/调试配置 小部件列表中，选择新建的 React Native 配置，并单击其旁边的 “运行”按钮。 GoLand 会打开 运行 工具窗口，并首先在新的 React Native 选项卡中启动 React Native bundler。

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

React Native 打包器正在运行

调试 React Native 应用

使用 GoLand，您可以调试使用原生 React Native bundler 或 Expo 的应用程序。

在调试 React Native 应用程序时，GoLand 依赖于 React Native 自身使用的 Chrome 运行时。 您还可以将 DevTools 与 GoLand 配合使用。 启动调试会话时，GoLand 会启动一个新的 Chrome 实例并连接到该实例。

调试使用原生打包器的 React Native 应用

  1. 根据需要在代码中设置 断点。

  2. 创建一个新的 React Native 运行／调试配置 如上所述。 如果 bundler 已在 GoLand 外部运行，请在 启动前 区域中选择它，并单击 移除 按钮（“移除”按钮）。

  3. 在工具栏上的 运行/调试配置 小部件列表中，选择新建的 React Native 配置，并单击其旁边的 “运行”按钮。 GoLand 会打开 运行工具窗口 ，并在新的 React Native 选项卡中运行 bundler。

  4. 构建完成并应用出现在模拟器中后， 打开应用内开发者菜单并选择 远程调试 JS。 详细信息请访问 React 官方网站。

    内置的 GoLand 调试器将连接到模拟器。

  5. 命中第一个断点后，继续执行调试会话 — 逐步执行断点 ，切换帧，动态修改数值， 检查挂起的程序， 计算表达式 ，以及 设置监视。

在 GoLand 中配置无头 Chrome

  1. 从主菜单中选择 运行(U) | 编辑配置(R)…。

  2. 在 运行/调试配置 对话框中，选择一个 React Native 配置，

  3. 在 用于调试的浏览器 字段旁，点击 浏览 按钮（“浏览”按钮）。 随即打开 Web 浏览器和预览 对话框。

  4. 选择 Chrome ，点击 复制 （“复制”按钮 ），然后将复制的配置重命名，例如为 Chrome 无头模式。

  5. 选择新的浏览器配置，点击 编辑 按钮（“编辑”按钮 ），然后在 Chrome 设置 对话框中输入 macOS 和 Linux 的 --headless 或 Windows 的 --headless --disable-gpu。

  6. 在运行／调试配置中，从 用于调试的浏览器 列表中选择新的 Chrome 无头模式 配置。 /Users/varvara.zaikina/Library/Application Support/JetBrains/WebStorm2023.3/chrome-user-data

最后修改日期： 2025年 9月 26日
Closure Linter重构 JavaScript