反应本机
从现有的 React Native 应用程序开始
下载依赖项
在弹出窗口中单击运行“npm install”或运行“yarn install” ：
您可以使用npm、Yarn 1或Yarn 2 ，详细信息请参阅npm 和 Yarn 。
从编辑器或项目工具窗口中package.json的上下文菜单中选择运行“npm install”或运行“yarn install”。
从项目中排除 android 和 iOS 文件夹
在“项目”工具窗口中，选择android或iOS文件夹。
从所选内容的上下文菜单中，选择“将目录标记为”，然后选择“排除”。
项目安全
提示
从欢迎屏幕或通过中描述的
编码协助
运行和调试 React Native 应用程序
创建 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.要模拟Android平台，请使用Android 虚拟设备。
要模拟iOS平台，需要全局安装ios-sim命令行工具。您可以通过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 依赖于 React Native 本身使用的 Chrome 运行时。您还可以将DevTools与 IntelliJ IDEA 一起使用。当您启动调试会话时，IntelliJ IDEA 会启动一个新的 Chrome 实例并附加到它。如果您不想看到任何新的 Chrome 窗口，请使用Chrome Headless 模式。
在Bundler host字段中，指定 React Native 捆绑程序运行的主机，默认值为localhost。
提示
如果您使用的是 Expo，您可能需要更改默认的捆绑程序主机以确保与调试器的成功连接。此连接可能会失败，因为 IntelliJ IDEA 默认情况下使用localhost开始调试，而 Expo 需要127.0.0.1或外部 IP 地址，具体取决于 Metro 捆绑程序配置的“连接”字段中选择的内容。有关更多信息，请参阅调试使用 Expo 的 React Native 应用程序。
在Bundler port字段中，指定 React Native 捆绑器运行的端口，默认选择8081 ，了解更多信息请访问React Native 官网。
如果您的应用程序使用 Expo，您可能需要将端口更改为19000或19001，具体取决于 Expo 配置。请参阅下面的调试使用 Expo 的 React Native 应用程序。
指定要使用的 Node.js 解释器。
如果您选择项目别名，IntelliJ IDEA 将自动使用Node.js页面上的节点解释器字段中的项目默认解释器。在大多数情况下，IntelliJ IDEA 会检测项目默认解释器并填充该字段本身。
您还可以选择另一个已配置的本地或远程解释器，或者单击
并配置一个新解释器。指定react-native-cli的路径和应用程序的工作目录。
react-native run-android（可选）键入或 的环境变量react-native run-ios。默认情况下，当您调用运行/调试配置时，IntelliJ IDEA 会自动启动 React Native 捆绑器。如果您已经从 IntelliJ IDEA 外部（例如从命令行）启动了捆绑程序，则可以重新使用它，而无需停止和重新启动。在“启动前”区域中选择您的捆绑程序，然后单击
。
运行应用程序
从工具栏上的“选择运行/调试配置”列表中选择新创建的React Native配置，然后单击列表旁边的“运行”按钮 ( )。IntelliJ IDEA 打开运行工具窗口，并首先在新的React Native选项卡中启动 React Native 捆绑器。
之后，根据所选的目标平台执行
react-native run-ios或命令。react-native run-android如果构建成功，模拟器将显示您的应用程序：
调试应用程序
调试使用本机捆绑器的 React Native 应用程序
根据需要在代码中设置断点。
如上所述创建一个新的React Native运行/调试配置。如果捆绑程序已在 IntelliJ IDEA 外部运行，请在“启动前”区域中选择它，然后单击“删除”按钮 ( )。
要启动应用程序，请从工具栏上的“选择运行/调试配置”列表中选择新创建的React Native配置，然后单击列表旁边的“运行”按钮 ( )。IntelliJ IDEA 打开运行工具窗口并在新的React Native选项卡中运行捆绑程序。
当构建完成并且应用程序出现在模拟器中时，打开应用程序内开发人员菜单并选择Debug JS Remotely。从React 官网了解更多信息。
内置的 IntelliJ IDEA 调试器连接到模拟器。
当第一个断点被击中时，继续调试会话 -单步调试断点、在帧之间切换、动态更改值、检查挂起的程序、 计算表达式并 设置监视。
调试使用 Expo 的 React Native 应用程序
打开package.json文件，找到该
scripts部分，然后添加启动 Expo 的脚本。根据需要在代码中设置断点。
如上所述创建一个新的React Native运行/调试配置，并更改默认设置，如下所示：
清除“构建并启动”复选框，因为此捆绑程序会自行处理该过程。
在Bundler 主机字段中，根据 Metro 捆绑程序配置的连接字段中选择的内容，将默认
localhost设置更改为外部 IP 地址。127.0.0.1在Bundler 端口字段中，将默认8081设置更改为19000或19001，具体取决于 Expo 配置。
在启动前区域中，选择默认的启动 React Native Bundler任务，然后单击删除按钮 (
)。
要通过脚本自动启动 Expo，请单击添加按钮 (
) 并从列表中选择运行 npm 脚本。
在“NPM 脚本”对话框中，选择启动 Expo 的 npm 脚本。
选择新创建的从工具栏上的选择运行/调试配置列表中选择配置，然后单击列表旁边的调试按钮 ( )。
当第一个断点被命中时，按照调试使用本机捆绑器的应用程序时的方式进行。
在 IntelliJ IDEA 中配置 Chrome Headless
笔记
macOS 和 Linux 上的 Chrome 版本 59 及更高版本以及 Windows 上的 Chrome 版本 60 及更高版本支持无头模式。
选择从主菜单
在“运行/调试配置”对话框中，选择 React Native 配置，
在用于调试的浏览器字段旁边，单击浏览按钮 (
)。Web浏览器和预览对话框打开。选择Chrome，单击复制(
)，然后将复制的配置重命名，例如，重命名为Chrome Headless。选择新的浏览器配置，单击“编辑”按钮 (
)，然后在“Chrome 设置”--headless对话框中键入macOS 和 Linux 或--headless --disable-gpuWindows 的内容。在运行/调试配置中，从用于调试的浏览器列表中选择新的Chrome Headless配置。
动图
感谢您的反馈意见！