RN:为WebStorm搭建React Native开发环境(Mac)

PS:最近又回来搞RN了,以下虽然都是一些老知识了,但你也许有用

问题背景:我不想在WebStorm/VSCode、终端、XCode中来回切换。我想在WebStorm直接运行ReactNative项目
问题背景:我不想在WebStorm/VSCode、终端、XCode中来回切换。我想在WebStorm直接运行ReactNative项目
问题背景:我不想在WebStorm/VSCode、终端、XCode中来回切换。我想在WebStorm直接运行ReactNative项目

1、为Run添加Add New Configuration

rn_WebStorm_setting1.png

点击,Edit configurations…会进入如下界面

rn_WebStorm_setting2.png

点击 + ,选择npm

rn_WebStorm_setting3.png

2、完善所添加的Configuration内容

外层内容填写如下:

rn_WebStorm_setting4.png

External tool内容如下:

rn_WebStorm_setting5.png

上述步骤2中的各值分别为:

  • Program:

    which react-native中获得的/usr/local/bin/react-native

rn_WebStorm_setting5_1.png
  • Arguments:

    run-ios --simulator="iPhone Xʀ"

  • Working directory:

    建议通过如下图添加宏的方式添加Working directory值。

rn_WebStorm_setting5_2.png

添加完成后的图为:

rn_WebStorm_setting6.png

至此,配置结束。接下来我们试下效果。

恭喜,配置结束,休息一下吧

3、试下配置效果是否有效

Run菜单中选择刚才添加的执行项,其就会在执行我们所设置的选项,即执行/usr/local/bin/react-native run-ios "--simulator=iPhone Xʀ"

执行结果如下:

rn_WebStorm_setting7.png

同样的其也会在终端中有如下显示:

rn_WebStorm_setting8.png

当然,如果你使用快捷键"Cmd+R"也能达到这个效果。

rn_WebStorm_setting9.png

经验证,配置无误,使用有效。

经验证,配置无误,使用有效,打工告成
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容