React Native
使用 React Native与 JavaScript 和 React 开发 iOS 和 Android 的原生移动应用程序。 由 Facebook 创建，并被 Instagram、Airbnb 以及现在 JetBrains 自家的 YouTrack mobile 应用程序使用。 从 React Native 官方网站 了解更多信息。
PhpStorm 可帮助您创建、编辑、lint、运行和维护 React Native 应用程序。 PhpStorm 还提供 React 和 Flow 符号的代码补全。
开始之前
创建一个新的 React Native 应用程序
在 PhpStorm 中创建 React Native 应用程序的推荐方法是使用专用项目生成器，例如 React Native CLI。
点击 新项目 屏幕上的 欢迎 或从主菜单中选择 。 将打开 新建 项目 对话框。
在左侧窗格中，选择 React Native。
在右侧窗格中：
指定存储与项目相关的文件的文件夹路径。
在 Node.js 运行时 字段中，指定要使用的 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包的文件夹。
当您点击 创建 时，PhpStorm 会生成一个 React Native特定的项目，包含所有必需的配置文件，下载依赖项，并创建一个 React Native类型的运行配置，使用默认设置。。
安装用于开始使用 React Native 的其他工具，例如 iOS 模拟器。 这些工具的列表取决于您的操作系统以及您要面向的移动平台。 有关详细的安装说明，请参阅 React Native 入门指南。
创建一个使用 Expo 的 React Native 应用程序
使用 PhpStorm，还可以通过 Expo 框架开发全栈 React Native 应用程序。
打开命令行 shell 或嵌入式 终端 （Alt+F12）。
切换到您想要创建应用程序的父文件夹。 为此，请输入：
cd <parent_folder>要开始生成应用程序，请输入：
npx create-expo-app@latest <application name>回答向导中的问题。 例如，接受安装
create-expo -app软件包的建议或选择要使用的 Expo SDK 版本。
从现有的 React Native 应用程序开始
要继续开发现有的 React Native 应用程序，请在 PhpStorm 中打开它并下载所需的依赖项。
打开您计算机上已有的应用程序源代码
点击 打开 屏幕上的 欢迎 或从主菜单中选择 。 在打开的对话框中，选择存储源文件的文件夹。
从您的版本控制系统检出应用程序源代码
在 欢迎 屏幕上点击 克隆仓库。
或者，从主菜单中选择 、 或 。
在主菜单中，您可能会看到与您的项目关联的其他任何版本控制系统，而不是 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 入门指南。
项目安全性
当您打开一个在 PhpStorm 外部创建并导入到其中的项目时，PhpStorm 会显示一个对话框，您可以在其中决定如何处理包含不熟悉的源代码的项目。
请选择以下选项之一：
在安全模式下预览 ：在这种情况下，PhpStorm 以预览模式打开项目。 这意味着您可以浏览项目的源代码，但无法运行任务和脚本，也无法运行项目。
PhpStorm 会在编辑器区域顶部显示一条通知，您可以点击 信任项目…… 链接，随时加载您的项目。
信任项目 ：在这种情况下，PhpStorm 会打开并加载一个项目。 这意味着项目已经初始化，项目的插件已解析，依赖项已添加，并且所有 PhpStorm 功能都可用。
不打开 ：在这种情况下，PhpStorm 不会打开项目。
有关更多信息，请参阅 项目安全性。
编码辅助
PhpStorm 在 JavaScript 代码中为 React API 和 JSX 提供代码补全功能。 代码补全适用于 React 方法、特定于 React 的属性、HTML 标签和组件名称、 React 事件 、组件属性等。 请参阅 React：完成代码以获取更多信息。
React Native StyleSheet 属性的代码补全功能也可用：
如果您在项目中使用 Flow，PhpStorm 可以在编辑器中高亮显示此类型检查器中的错误。 如需更多信息，请参阅 在 PhpStorm 中配置 Flow和 在 WebStorm 中使用 Flow。
运行 React Native 应用程序
您可以在物理设备或模拟器上运行您的应用程序。 在启动应用程序之前，请确保模拟器已经在运行，或者如果您正在使用物理设备，请确保它已连接到您的计算机。
PhpStorm 让运行 React Native 应用程序变得灵活。 例如，如果您第一次启动应用程序，可以选择运行 React Native bundler、构建应用程序并在模拟器上打开——这些都是一个运行会话的一部分。 您也可以跳过启动 bundler ，如果它已在运行中，或者拒绝构建应用程序，如果自上次运行以来您未对其原生代码进行任何更改。
创建 React Native 运行配置
在工具栏上的 运行/调试配置 小组件中选择 编辑配置 ，点击 添加新配置 （
），然后从列表中选择 React Native 以打开 配置设置。
选择是否希望 PhpStorm 为您构建和启动应用程序：
如果这是首次启动应用程序或自上次运行以来已更新其本机代码，请选中 构建和启动 复选框。
如果自上次构建以来未更改应用的原生代码，请清除该复选框的选中状态。
如果您选中了 构建和启动 复选框，请选择目标平台，Android 或 iOS。
根据您的选择，PhpStorm 将使用
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 bundler 的主机，默认值为 localhost。
在 打包器端口 字段中，指定 React Native bundler 运行的端口，默认选择
8081，从 React Native 官方网站了解更多信息。指定要使用的 Node.js 运行时。
如果您选择 项目 别名， PhpStorm 将自动使用在 JavaScript 运行时 页面上 Node.js 运行时 字段中的项目默认解释器。 在大多数情况下， PhpStorm 会检测到项目的默认运行时，并自动填写该字段。
您还可以选择其他已配置的本地或远程解释器，或点击
并配置一个新的解释器。指定应用程序的 react-native-cli 路径和 工作目录。 如果需要，输入
react-native run-android或react-native run-ios的环境变量。默认情况下，当您调用运行配置时，PhpStorm 会自动启动 React Native bundler。
如果您已经在 PhpStorm 之外启动了 bundler，例如，从命令行启动，您可以在不停止和重新启动的情况下重复使用它。 在 启动前 区域选择您的 bundler 并点击
。
有关所有运行配置通用设置的详细信息，请参阅 运行/调试配置。
准备设备或模拟器
如果您使用的是 Android 设备，每次开始使用应用程序时都需要准备它。
iOS模拟器只需安装一次，之后 PhpStorm 会自动启动它 react-native run-ios。
要准备 Android 设备，请启动 Android 虚拟设备或通过 USB 连接实际的 Android 设备。
详情请参阅 React Native 官方网站。
要准备 iOS 模拟器，请打开命令行 shell 或嵌入的 终端 （Alt+F12 ），然后输入：
npm install --global ios-sim
运行应用程序
在工具栏的 运行/调试配置 小部件列表中，选择新创建的 React Native 配置，然后点击其旁边的 
。 PhpStorm 打开 运行 工具窗口，并首先在新的 React Native 标签页中启动 React Native bundler。
之后，将根据所选目标平台执行 react-native run-ios 或 react-native run-android 命令。 如果构建成功，模拟器将显示您的应用程序：
