React Native IDE - nuclide

1,588 阅读2分钟

查看图片

安装

  • nuclide 是基于 atom 的,首先我们去安装 atom: Atom,确保安装 1.7.4+ 之后的版本。

  • 在命令行中执行 apm install nuclide ,等待安装结束后,打开 atom

  • 默认情况 nuclide 没有安装建议安装的包,如果不安装这些是体验不到最优的 React Native 的开发体验的,我们这就来安装他吧

    • 依次在上面的菜单栏打开 Packages | Settings View | Manage Packages

    • 在搜索中搜索 nuclide ,点击 Settings 【图1】

    • 选中 Install Recommended Packages on Startup 复选框 【图2】

查看图片

【图1】

查看图片

【图2】

恭喜你,重启后就等待安装结束吧~

开发

等所有依赖安装完成后,快速打开一个 React Native 项目:

查看图片

点击 Add Project Folder 选择项目文件夹就可以打开一个项目了:

查看图片

我们看都左边就是典型的项目树,在上面点击鼠标右键,可以看到有很多常用的上下文菜单:

查看图片

双击文件就可以开始愉快的写代码了。

Debug

调试 React Native 需要依赖浏览器进行调试,现在用 nuclide ,我们在其中进行调试了,还可以查看到当前界面中的参数信息等等,非常的方便,整个过程也非常简单,有两种方式可以实现,我们用一个比较通用的方式来实现。

  • Command+Shift+P 打开 atom 命令行界面,输入 React Native ,选择 Nuclide React Native: Start Packager【图6】

  • 在任意的命令行工具中(如 iterm2)输入 react-native run-ios 启动模拟器或者真机

  • 再次打开 atom 命令行界面,选择 Nuclide React Native: Start Debugging ,等待 debug【图7】

查看图片

【图6】

查看图片

【图7】

  • 在运行起来的 App 中,唤出 dev 菜单 (cmd-d) ,选择 remote js debug ,就可以开始调试了。

  • 可以尝试在代码中设置断点,并触发 【图8】

查看图片

【图8】

  • 在 atom 的命令行界面中选择 Nuclide React Native Inspector: Show ,开启当前界面参数查看功能 【图9】,如果出现错误,可以重启 atom ,一般就可以解决问题了。

查看图片

【图9】

结语

这期的文章就结束了,想了解更多好玩的新鲜工具链和跨端开发的前沿文章请关注我们的公众号:

查看图片