React Native探索(二)Atom+Nuclide安装、配置与调试
相关文章 1.开发IDE选择React Native的开发IDE有很多种,比如FaceBook 官方推荐的 Atom+Nuclide、Android Studio的同门WebStorm(收费)、Sublime Text 3、Visual Studio Code和Deco。这里Atom+Nuclide和Deco目前并不支持Windows平台。笔者折腾了一段时间Sublime Text 3,折腾各种插件直到一脸懵逼。WebStorm和Android Studio很像,并没觉得他有什么优势可以收费(可以破解)。最终我选择了Atom+Nuclide,主要有以下几个原因:
如果你觉得Atom+Nuclide卡顿或者不好用,推荐使用WebStorm,请点击这里 2.准备工作在安装Atom+Nuclide前需要先安装watchman和 flow。 brew install watchman
flow 是一个开源的JavaScript静态类型检查器,用来发现 JS 程序中的类型错误。 brew install flow
3.Atom+Nuclide安装Atom是Github推出的一款开源编辑器,可以直接去官网https://atom.io/下载它,安装过程很简单。 安装Nuclide接下来安装Nuclide,Nuclide是Facebook在Atom的基础上开发的一个插件IDE,可以用来开发React Native、iOS 和 Web应用。我们打开Atom,点击顶部菜单栏的Atom->Preferences,在Settings中的Install界面搜索nuclide,搜索到nuclide后点击Install按钮。如下图所示。 因为我已经安装了Nuclide,所以没有Install按钮。安装过程可能需要很长的时间,安装完毕后重新打开Atom会发现顶部菜单栏多了Nuclide一栏,说明Nuclide安装成功。 安装Nuclide相关依赖包在Settings中点击Packages界面,点击顶部菜单栏的Packages-> Settings View->Manage Packages也能进入Packages界面。在Packages界面搜索nuclide,并点击nuclide的Settings按钮,如下图所示。 在nuclide的Settings中勾选Install Recommended Packages On Startup选项,并在Path to Flow executable输入flow 路径,flow 路径一般情况下都是:/usr/local/bin/flow,你可以在终端输入which flow 命令来进行查询。 重启 Atom,这些依赖包便会开始自动安装。 配置flow这时我们通过Add Project Folder来打开我们已有的React Native工程,如下图所示。 这里发现flow的版本为0.42,则在终端输入如下命令: npm install flow-bin@0.42 -g
再次在终端输入flow,发现flow运行正常。接着在js文件的最上方加入 需要注意的是,网上的文章都是在index.ios.js做的测试,这是没问题的,如果在index.android.js中做测试则会发现flow不好用,这是因为在 .flowconfig文件有如下语句: [ignore]
; We fork some components by platform
.*/*[.]android.js
所有的以.android结尾的js文件的flow检查都会失效,如果去掉该语句则会报100多个error,目前在index.android.js上笔者没有先到好的解决方案,如果有人有解决方案,不吝赐教。 4.调试程序在终端进入项目目录并输入如下命令安装程序: react-native run-android
Debugger调试程序使用快捷键 command + shift + p 打开输入框,输入debugging,并选择Nuclide React Native:Start Debugging: React Inspector使用快捷键 command + shift + p 打开输入框,输入insp,并选择Nuclide React Inspector:Toggle: 如果连接的是SDK自带的模拟器,稍等片刻就会在React Inspector中出现如下界面,它会将当前界面的UI 层次结构显现出来。 参考资料 欢迎关注我的微信公众号,第一时间获得博客更新提醒,以及更多成体系的Android相关原创技术干货。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |