React Native探索之Atom+Nuclide安装、配置和调试

前言

上一篇文章React Native探索之环境搭建与Hello World(Windows/Mac)我们搭建了开发环境,并写了个Hello World。这一节我们来学习React Native的开发IDE:Atom+Nuclide的安装、配置与调试。本文所讲的内容只适用于Mac平台。

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很像,它是收费的(可以破解)。WebStorm的安装一点难度都没有,因此本篇文章主要讲Atom+Nuclide的安装。 如果你觉得Atom+Nuclide卡顿或者不好用,推荐使用WebStorm,这篇文章会帮助到你:http://blog.csdn.net/it_talk/article/details/52448597 React Native开发平台我建议使用Mac,能省不少心(开发Android我也建议用Mac来开发)。

2.准备工作

在安装Atom+Nuclide前需要先安装watchman和 flow。 watchman是 facebook 的一个开源项目,用来监视文件并且记录文件的改动情况,当文件变化时它可以触发一些操作。

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,这些依赖包便会开始自动安装。

可以看到nuclide需要很多的依赖包,如果这些依赖包有哪个没有安装成功,Atom会给出提示,我们在Settings的Install界面进行搜索安装就可以了。 安装完成后会看到界面上多了一条额外的ToolBar。

配置flow

这时我们通过Add Project Folder来打开我们已有的React Native工程,如下图所示。

这时我们在终端进入React Native工程目录,执行flow语句来查看flow是否正常运行,如果发现系统的flow版本与工程配置的flow版本不一致,则打开工程中的 .flowconfig文件,查看flow的版本。

这里发现flow的版本为0.42,则在终端输入如下命令:

npm install flow-bin@0.42 -g

再次在终端输入flow,发现flow运行正常。接着在js文件的最上方加入/*@flow*/或者//@flow,这样flow就可以开始检查了。我们随便加入些错误语句来进行测试,如下图所示。

需要注意的是,网上的文章都是在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:

这时Atom弹出Debugger界面,并等待进行Debugger。我们通过Command+M进入模拟器的开发菜单,选择Debug JS Remotely。

这时Debugger界面进入了debug状态,我们在程序中打上断点,通过按2次R键来Reload界面,程序就会停留在断点位置,如下图所示。

React Inspector

使用快捷键 command + shift + p 打开输入框,输入insp,并选择Nuclide React Inspector:Toggle:

如果连接的是SDK自带的模拟器,稍等片刻就会在React Inspector中出现如下界面,它会将当前界面的UI 层次结构显现出来。

原文发布于微信公众号 - 刘望舒(liuwangshuAndroid)

原文发表时间:2018-06-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端大白专栏

基于mpvue开发微信小程序,vue能用的,用mpvue哪些情况不能用

3977
来自专栏散尽浮华

confluence上传文件附件预览乱码问题(linux服务器安装字体操作)

在confluence上传excel文件,预览时发现乱码问题主要是因为再上传文件的时候一般是Windows下的文件上传,而预览的时候,是linux下的环境,由于...

3302
来自专栏Python中文社区

运用Python实现WordPress网站大规模自动化发布文章

很多用WordPress建站的朋友都有这样的苦恼,网站建好了,没有时间自己写文章,慢慢就荒废了,还有的朋友在浏览器收集好多喜欢的博客网站地址,因为收集的网址太多...

7538
来自专栏前端人人

React第三方组件4(状态管理之Reflux的使用①简单使用)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件4(状态管理之Reflux的使用①...

3318
来自专栏Java帮帮-微信公众号-技术文章全总结

PyCharm下载与安装配置

实验目的: . 在windows/mac本地安装pycharm软件(本地无需安装python); . 利用远程服务器的python解释器来创建和启动django...

2027
来自专栏技术点滴

使用Atom打造无懈可击的Markdown编辑器

一直以来都奢想拥有一款全能好用的Markdown编辑器,直到遇到了Atom。废话不多说,直接开搞!

2112
来自专栏刘望舒

React Native入门(二)Atom+Nuclide安装、配置与调试

前言 上一篇文章我们搭建了开发环境,并写了个Hello World。这一节我们来学习React Native的开发IDE:Atom+Nuclide的安装、配置与...

4125
来自专栏Python小屋

PAGE:像Visual Studio一样设计Python GUI窗体

虽然使用标准库tkinter开发Python GUI程序很方便,也提供了强大的功能,但是窗体上的一切都需要程序员使用代码来控制,在页面布局上浪费大量时间,确实不...

5734
来自专栏向治洪

React Native程序调试

在做React Native开发时,少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低B...

2956
来自专栏landv

C#_FindWindow

2274

扫码关注云+社区

领取腾讯云代金券