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