运行/调试配置：React Native

构建并启动应用程序

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

• 如果您自上次构建以来尚未对应用程序的本机代码进行任何更改，请清除此复选框。 当您开始调试时，CLion 会等待您按照 React Native 官方网站 上所述启用远程调试并在模拟器中打开您的应用程序。

平台

在此区域中，选择应用程序的目标平台。

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

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

• 要模拟 iOS 平台，您需要全局安装 ios-sim command-line tool。 您可以通过 Node Package Manager (npm) 完成此操作，参阅 npm、pnpm 和 Yarn ，或者根据您的操作系统运行 sudo npm install ios-sim -g 命令。

请参阅 React Native 官方网站了解更多信息。

参数

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

调试浏览器

在调试 React Native 应用程序时，CLion 依赖于 Chrome 运行时，React Native 本身也使用它。 您还可以将 DevTools 与 CLion 一起使用。 当您启动调试会话时，CLion 会启动一个新的 Chrome 实例并将其附加到该实例。

Bundler 服务器

在此字段中，指定打包工具运行的主机，默认值为 localhost 。

捆绑器端口

在此字段中，指定打包工具运行的端口。

• CLion 会自动选择 8081 ，这是 React Native 打包工具的默认值。 请参阅 React Native 官方网站了解更多信息。

• 如果您的应用程序使用 Expo，您可能需要根据 Expo 配置将端口更改为 19000 或 19001。

Node 解释器

在此字段中，指定要使用的 Node.js 解释器。

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

您还可以选择另一个已配置的本地解释器，或点击 并配置一个新的。

React Native 包

在此字段中，指定 react-native-cli 的路径。

工作目录

指定应用程序的 工作目录。 默认情况下，该字段显示 项目根文件夹。

环境变量

在此字段中，可选地输入用于执行 react-native run-android 或 react-native run-ios 命令的环境变量。

名称(N)

为运行配置指定一个名称，以便在编辑或运行时能快速识别。

允许多个实例(U)

允许并行运行此运行配置的多个实例。

默认情况下，它是禁用的，当您在另一个实例仍在运行时启动此配置时，CLion建议停止正在运行的实例并启动另一个实例。 这在运行配置消耗大量资源且没有充分理由运行多个实例时非常有用。

存储为项目文件(S)

将运行配置设置保存到文件中，以便与其他团队成员共享。 默认位置是 .idea/runConfigurations 。 但是，如果您不想共享 .idea 目录，您可以将配置保存到项目中的任何其他目录。

默认情况下，它是禁用的，并且 CLion 将运行配置设置存储在 .idea/workspace.xml 。

Alt+Insert

创建运行/调试配置。

Alt+Delete

删除选定的运行/调试配置。 请注意，您不能删除默认配置。

Ctrl+D

创建选定运行/调试配置的副本。 请注意，您正在创建默认配置的副本。

仅当您选择一个 临时配置时才会显示该按钮。 点击此按钮以将临时配置保存为永久配置。

移入新建文件夹／新建文件夹。 您可以通过 将它们放入文件夹来对运行/调试配置进行分组。

要创建文件夹，请选择某个类别中的配置，点击 ，并指定文件夹名称。 如果只有一个类别处于焦点状态，则会创建一个空文件夹。

然后，为了将配置移动到文件夹中、文件夹之间或者文件夹外，请使用拖拽或 和 按钮。

要删除分组，请选择一个文件夹，然后点击 。

点击此按钮以按字母顺序排序配置。

Alt+Insert

点击此图标以添加下列可用任务之一：

• 运行 External tool ：选择运行外部应用程序。 在打开的对话框中，选择一个或多个您想要运行的应用程序。 如果在 CLion 中尚未定义，请添加其定义。 如需更多信息，请参阅 外部工具 和 外部工具。

• 运行另一个配置 ：选择执行另一个运行/调试配置，并等待其完成后再开始当前配置。 如果您想并行运行多个配置，请使用 复合运行/调试配置。

• 运行File Watcher ：选择此选项以让 CLion 应用所有当前活动的 文件监视器。

• 运行Grunt 任务 ：选择此选项来运行 Grunt 任务。

  在打开的 Grunt 任务 对话框中，指定定义所需任务的 Gruntfile.js ，选择要执行的任务，并指定要传递给 Grunt 工具的参数。

  指定 Node.js 解释器的位置、传递给它的参数，以及 grunt-cli 包的路径。

• 运行 Gulp 任务 ：选择此选项以运行 Gulp task。

  在打开的 Gulp 任务 对话框中，指定定义所需任务的 Gulpfile.js ，选择要执行的任务，并指定传递给 Gulp 工具的参数。

  指定 Node.js 解释器的位置、传递给解释器的参数以及到 gulp 包的路径。

• 运行 npm Script ：选择此选项来执行一个 npm 脚本。

  在 NPM Script 对话框中，指定 npm run/debug configuration settings。

• 编译TypeScript ：选择运行内置的 TypeScript 编译器，从而确保您对 TypeScript 代码所做的所有更改都反映在生成的 JavaScript 文件中。 在打开的 TypeScript 编译设置 对话框中，选择或清除此 检查错误 复选框，以配置编译器在检测到错误时的行为:

  • 如果选中了 检查错误 复选框，编译器会显示所有错误，并且运行配置将不会启动。

  • 如果清除了 检查错误 复选框，编译器将显示所有检测到的错误，但运行配置仍将启动。

• 启动React Native Bundler ：选择此选项以在运行或调试会话的一部分中自动运行 bundler。 默认情况下，这是通过 react-native start 完成的。

  如果您的应用程序使用 Expo ，您需要通过 start npm 任务运行开发服务器。 为此，请点击 ，然后在 配置 React Native 对话框中，选择 npm 脚本 并从列表中选择 start。

• 生成CoffeeScript 源映射 ：选择此选项以生成 CoffeeScript 源代码的源映射。 在打开的对话框中，指定您的 CoffeeScript 源文件所在的位置。

Alt+Delete

点击此图标可将所选任务从列表中移除。

Enter

点击此图标可编辑选定的任务。 请在打开的对话框中进行必要的更改。

Alt+Up

Alt+Down

点击这些图标以在列表中将所选任务上移或下移一行。 任务将按照它们在列表中出现的顺序执行。

显示此页面

选中此复选框以在实际启动运行/调试配置之前显示运行/调试配置设置。

激活工具窗口

默认情况下，此复选框处于选中状态，并且在您启动 run/debug 配置时， Run 或 Debug 工具窗口会打开。

否则，如果复选框未选中，工具窗口将被隐藏。 但是，当配置正在运行时，您可以通过按 Alt+4 或 Alt+5 自行打开相应的工具窗口。