安装
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】
结语
这期的文章就结束了,想了解更多好玩的新鲜工具链和跨端开发的前沿文章请关注我们的公众号: