使用最新WebStorm开发及调试React Native项目

React Native允许您使用JavaScript和React为iOS和Android开发原生移动应用程序。它是由Facebook创建的，用于Instagram，Airbnb和现在的JetBrains自己的 YouTrack移动应用程序（顺便说一下，它是开源的）等知名应用程序。

使用WebStorm，您现在可以使用React Native开发移动应用程序，从而获得WebStorm好处的所有好处，例如React，Flow支持和内置调试器的代码完成。我们相信WebStorm可以成为使用React Native进行开发的强大工具！

让我们看看如何使用WebStorm中的React Native建立开发工作流程。

安装React Native CLI

确保您的计算机上安装了React Native CLI。要安装它，请在终端中运行以下命令：npm install -g react-native-cli。

您开始使用React Native时需要安装的工具列表取决于您的操作系统以及您要定位应用程序的移动平台。有关详细的安装说明，请查看React Native的入门指南。

创建一个新项目

现在，您可以直接从IDE欢迎屏幕创建一个新的React Native项目：单击Create new project，从左侧列表中选择React Native，输入项目名称并单击OK。

WebStorm将运行项目生成器并安装所有必需的依赖项。

当然，您也可以打开现有项目或从版本控制中选择一个。

我们建议您从项目中排除android和ios文件夹。为此，右键单击“项目”视图中的文件夹，然后选择“ 标记为已排除”。

运行和调试应用程序

现在我们在IDE中有我们的应用程序代码，让我们运行它。

UPD：  在WebStorm 2018.1中，我们  重新设计了React Native配置。它现在为您提供了更灵活的运行捆绑程序和构建应用程序本身。在下面的步骤中，我们使用WebStorm版本2018.2。

我们需要创建一个新的React Native运行/调试配置。在“Run”菜单中，选择“ Edit configurations…”，单击“ +”按钮，然后从列表中选择“ React Native ”。

要首次启动React Native应用程序，您需要做两件事：运行React Native bundler / packager，然后使用react-native run-ios或在模拟器或设备上构建和启动应用程序run-android command。只有在那之后，您才可以开始调试它。

选中  Build and Launch Application选项后，WebStorm将为您完成所有这些操作 - 您只需选择目标平台iOS或Android，确保React Native CLI软件包的路径正确并单击Ok。

如果您要在Android上运行您的应用，请不要忘记先启动Android虚拟设备  。您还可以在通过USB连接的真实Android设备上运行您的应用程序 （为此，请不要忘记  启用USB调试）。

现在让我们运行创建的配置 - 单击IDE工具栏中配置名称旁边的绿色调试图标。WebStorm将首先在新的React Native工具窗口中启动React Native打包程序，然后运行react-native run-ios或react-native run-android命令，具体取决于所选的目标平台。

如果构建成功，您将在模拟器中看到您的应用。

模拟器第一次打开后，转到应用内开发人员菜单并选择Remote JS Debugging。

然后，WebStorm的内置调试器将连接到模拟器，您将能够获得放在源代码中的断点。

在调试器中，您可以单步执行代码，设置监视，并浏览调用堆栈和变量值。

如果这不是你第一次运行你的应用程序并且自上次构建以来你没有对本机代码进行任何更改，那么你真的不需要重建应用程序 - 你可以只运行bundler，在模拟器中打开应用程序然后调试它。

在这种情况下，创建一个新配置（或修改您已创建的配置）并取消选中其中的  Build and Launch Application复选框。调试此配置时，WebStorm将运行React Native bundler并等待您在应用程序中启用远程调试的情况下在模拟器中打开应用程序。

现在，运行React Native捆绑器的灵活性也更高。它现在在React Native配置中列为Before Launch任务。默认情况下，它将运行  react-native start。您还可以从项目的package.json中选择将启动bundler的npm任务。

或者，如果您已经运行了捆绑包，则只需从配置中删除此步骤（因为您不需要为每个应用程序运行多个捆绑器）。

如果您在应用中使用Expo，请参阅此博客文章了解相关步骤。

编码协助

您可能知道，WebStorm支持React和JSX，在构建React Native应用程序时肯定会有所帮助。这包括：React组件的属性，事件和所需属性的代码完成; 导航到自定义组件的定义和完成; 组件名称的重构; 还有更多。查看我们的博客文章，在WebStorm中使用React：编码帮助。

WebStorm 2016.3还为React Native StyleSheet属性添加了代码完成：

如果您在项目中使用Flow，WebStorm可以在编辑器中突出显示Flow中的错误。在Preferences |中将Flow作为JavaScript版本启用 语言和框架| JavaScript并指定Flow可执行文件的路径。在此博客文章中了解有关使用Flow的更多信息。