React Native
使用 React Native ，您可以使用 JavaScript 和 React 为 iOS 和 Android 开发原生移动应用。 此框架由 Facebook 创建，被应用于 Instagram、Airbnb 等知名应用，现在也用于 JetBrains 自家的 YouTrack mobile 应用。 详细了解可访问 React Native 官方网站。
WebStorm 可帮助您创建、编辑、检查、运行、调试和维护 React Native 应用。 WebStorm 还提供对 React 和 Flow 符号的代码补全功能。
开始之前
创建新 React Native 应用
建议在 WebStorm 中创建 React Native 应用的方式是使用专用的项目生成器，例如 React Native CLI。
在 欢迎 界面点击 新建项目 ，或通过主菜单选择 。 将打开 新建 项目 对话框。
在左侧窗格中选择 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包的文件夹。
点击 创建 后，WebStorm 将生成一个特定于 React Native 的项目，包含所需的配置文件，下载依赖项，并使用默认设置创建一个类型为 React Native 的运行/调试配置。
安装其他工具以开始使用 React Native，例如 iOS 模拟器。 这些工具列表取决于您的操作系统以及应用所面向的移动平台。 请参阅 React Native 入门指南 获取详细的安装说明。
使用现有 React Native 应用开始工作
若要继续开发现有 React Native 应用，请在 WebStorm 中打开该应用并下载所需依赖项。
打开已存在于本机上的应用源文件
在 欢迎 界面上点击 打开 ，或从主菜单中选择 。 在打开的对话框中，选择存储源代码的文件夹。
从版本控制中检出应用源文件
在 欢迎 界面上点击 克隆版本库克隆。
或者，您也可以从主菜单中选择 、 或 。
在主菜单中，可能会显示任何与您的项目相关联的其他版本控制系统来代替 Git。 例如， Mercurial 或 Perforce。
在打开的对话框中，从列表中选择您的版本控制系统并指定用于检出应用源代码的存储库。 如需了解更多信息，请参见 检出项目（克隆）。
下载依赖项
在弹出窗口中点击 运行 'npm install' 或 运行 'yarn install'：
您可以使用 npm、 Yarn 1 或 Yarn 2 ，详细信息请参阅 npm 与 Yarn。
或者，在编辑器中或 项目 工具窗口 Alt+1 中，从 package.json 的上下文菜单中选择 运行 'npm install' 或 运行 'yarn install'。
将 android 和 iOS 文件夹从项目中排除
在 项目 工具窗口 Alt+1 中，选择 android 或 iOS 文件夹。
在所选项的上下文菜单中选择 将目录标记为 ，然后选择 已排除。
安装其他工具以开始使用 React Native，例如 iOS 模拟器。 这些工具的列表取决于您的操作系统和应用要部署的移动平台。 有关详细的安装说明，请参见 React Native 入门指南。
项目安全
当您打开在 WebStorm 外部创建并导入到其中的项目时，WebStorm 会显示一个对话框，您可以在其中决定如何处理该包含未知源代码的项目。
选择以下选项之一：
在安全模式中预览 ：在此情况下，WebStorm 将在预览模式下打开项目。 这意味着您可以浏览项目源代码，但无法运行任务与脚本，也无法运行或调试项目。
WebStorm 会在编辑器区域顶部显示一条通知，您可以随时点击 信任项目… 链接加载项目。
信任项目 ：在此情况下，WebStorm 会打开并加载项目。 这意味着项目已初始化、插件已解析、依赖项已添加，并且所有 WebStorm 功能均可用。
不打开 ：在此情况下，WebStorm 不会打开项目。
详细信息请参阅 项目安全性。
编码辅助
WebStorm 为 JavaScript 代码中的 React API 和 JSX 提供代码补全。 代码补全适用于 React 方法、React 特有属性、HTML 标签与组件名称、 React 事件 、组件属性等。 如需了解更多信息，请参见 React：代码补全。
也提供对 React Native StyleSheet 属性的代码补全：
如果您的项目中使用了 Flow，WebStorm 可以在编辑器中高亮显示由该类型检查器检测到的错误。 如需了解更多信息，请参阅 在 WebStorm 中配置 Flow 与 在 WebStorm 中使用 Flow。
运行和调试 React Native 应用
您可以在真实设备或模拟器上运行并调试应用程序。 在启动应用程序之前，请确保模拟器已运行，或如果使用的是物理设备，则其已连接至您的计算机。
WebStorm 提供对 React Native 应用运行和调试的高度灵活支持。 例如，如果是首次启动应用程序，您可以选择运行 React Native bundler、构建应用并在模拟器中打开——所有这些都作为运行或调试会话的一部分完成。 如果 bundler 已在运行，您也可以跳过其启动，如果自上次运行以来未更改本机代码，也可以跳过构建应用程序。
创建 React Native 运行/调试配置
从工具栏的 运行/调试配置 工具中选择 编辑配置 ，点击 添加新配置 按钮（
），然后从列表中选择 React Native 以打开 配置设置。
选择是否由 WebStorm 为您构建并启动应用程序：
如果这是首次启动应用程序，或自上次运行以来已更新其本机代码，请选中 构建并启动 复选框。
如果自上次构建以来未更改应用的本机代码，请取消选中该复选框。 启动调试时，WebStorm 将等待您在模拟器中打开应用并启用远程调试，具体操作请参见 React Native 官方网站。
如果您选中了 构建并启动 复选框，请选择目标平台：Android 或 iOS。
根据您的选择，WebStorm 会使用
react-native run-ios或react-native run-android启动 bundler。若要模拟 Android 平台，请使用 Android 虚拟设备。
若要模拟 iOS 平台，您需要全局安装 ios-sim 命令行工具。 您可以通过 Node Package Manager（npm） 安装，参考 npm、pnpm 和 Yarn ，或根据操作系统运行
sudo npm install ios-sim -g命令。
详细信息请参阅 React Native 官方网站。
或者，您可以在 实参 字段中键入要传递给 React Native 的参数，例如，通过
‑‑simulator标志指定模拟器类型：‑‑simulator="iPhone 4s"。指定要使用的浏览器。
在调试 React Native 应用程序时，WebStorm 依赖于 React Native 本身使用的 Chrome 运行时环境。 您也可以将 DevTools 与 WebStorm 一起使用。 当您启动调试会话时，WebStorm 会启动一个新的 Chrome 实例并附加到该实例。 如果您不希望看到任何新的 Chrome 窗口，请使用 Chrome Headless 模式。
在 打包主机 字段中，指定运行 React Native bundler 的主机，默认值为 localhost。
在 打包端口 字段中，指定运行 React Native bundler 的端口，默认选择 8081 ，详细信息请参阅 React Native 官方网站。
指定要使用的 Node.js 解释器。
如果选择 项目 别名，WebStorm 将自动使用 Node 解释器 字段在 Node.js 页面上选择的项目默认解释器。 在大多数情况下，WebStorm 会检测项目的默认解释器并自动填充该字段。
您还可以选择另一个已配置的本地或远程解释器，或单击
来配置新的解释器。如需了解详情，请参阅 配置远程 Node.js 解释器、 配置本地 Node.js 解释器 和 在 Windows 子系统 Linux 中使用 Node.js。
指定 react-native-cli 路径以及应用程序的 工作目录。 还可以为
react-native run-android或react-native run-ios输入环境变量。默认情况下，当您调用运行/调试配置时，WebStorm 会自动启动 React Native bundler。 如果您已在 WebStorm 外启动了 bundler，例如从命令行启动，您可以在不停止和重新启动的情况下重复使用该 bundler。 在 启动前 区域中选择您的 bundler 并单击
。
有关适用于所有运行/调试配置的通用设置的更多信息，请参阅 运行/调试配置。
准备设备或模拟器
如果您使用的是 Android 设备，则每次开始处理应用程序时都需要准备该设备。
iOS 模拟器只需安装一次，之后 WebStorm 会通过 react-native run-ios 自动启动它。
要准备 Android 设备，请启动 Android 虚拟设备 或启用 USB 调试并通过 USB 连接实机 Android 设备。
详细信息请参阅 React Native 官方网站。
要准备 iOS 模拟器，请打开内置的 终端 （Alt+F12 ），然后键入：
npm install --global ios-sim
运行应用
在工具栏上的 运行/调试配置 小部件列表中，选择新建的 React Native 配置，然后单击其旁边的 
。 WebStorm 会打开 运行 工具窗口，并在新的 React Native 标签页中首先启动 React Native bundler。
之后将根据所选目标平台执行 react-native run-ios 或 react-native run-android 命令。 如果构建成功，模拟器将显示您的应用程序：
调试 React Native 应用
使用 WebStorm，您可以调试使用原生 React Native bundler 或 Expo 的应用程序。
在调试 React Native 应用程序时，WebStorm 依赖于 React Native 本身使用的 Chrome 运行时环境。 您也可以将 DevTools 与 WebStorm 一起使用。 当您启动调试会话时，WebStorm 会启动一个新的 Chrome 实例并附加到该实例。 如果您不希望看到任何新的 Chrome 窗口，请使用 Chrome Headless 模式。
调试使用原生打包器的 React Native 应用
按需在代码中设置 断点。
创建新的 React Native 运行/调试配置 如上所述。 如果 bundler 已在 WebStorm 外部运行，请在 启动前 区域中选择它，然后点击 移除 按钮（
）。在工具栏上的 运行/调试配置 小部件列表中，选择新建的 React Native 配置，然后单击其旁边的
。 WebStorm 会打开 Run 工具窗口 ，并在新的 React Native 标签页中运行 bundler。构建完成并在模拟器中显示应用程序后， 打开应用内开发者菜单 并选择 远程调试 JS。 详细信息请参阅 React 官方网站。
内置的 WebStorm 调试器将连接到模拟器。
击中第一个断点后，继续调试会话 — 逐步执行断点 、在帧之间切换、动态更改值、 检查挂起的程序、 计算表达式 ，并 设置监视。
在 WebStorm 中配置无头 Chrome
从主菜单中选择 。
在 运行/调试配置 对话框中，选择一个 React Native 配置，
在 用于调试的浏览器 字段旁，点击 浏览 按钮（
）。 将打开 Web 浏览器和预览 对话框。选择 Chrome ，点击 复制 （
），然后重命名复制的配置，例如为 无界面 Chrome。选择新的浏览器配置，点击 编辑 按钮（
），并在 Chrome 设置 对话框中，为 macOS 与 Linux 输入 --headless，或为 Windows 输入--headless --disable-gpu。在运行／调试配置中，从 用于调试的浏览器 列表中选择新的 无界面 Chrome 配置。 /Users/varvara.zaikina/Library/Application Support/JetBrains/WebStorm2023.3/chrome-user-data
