React Native的开发工具和调试方法

一、背景介绍

接触一门新的语言，第一是看官方的开发文档，第二自然就是开发工具，第三就是调试方法。

下面介绍RN所需要用到的开发工具和调试方法。

二、开发工具

1.sublime

Sublime Text 是一个复杂的文本、代码编辑器。出色用户界面，非凡的功能和惊人的性能。

下载地址：http://www.sublimetext.com/3

破解方法：点击菜单－help－Enter License

—– BEGIN LICENSE —–

Andrew Weber

Single User License

EA7E-855605

813A03DD 5E4AD9E6 6C0EEB94 BC99798F

942194A6 02396E98 E62C9979 4BB979FE

91424C9D A45400BF F6747D88 2FB88078

90F5CC94 1CDC92DC 8457107A F151657B

1D22E383 A997F016 42397640 33F41CFC

E1D0AE85 A0BBD039 0E9C8D55 E1B89D5D

5CDB7036 E56DE1C0 EFCC0840 650CD3A6

B98FC99C 8FAC73EE D2B95564 DF450523

—— END LICENSE ——

为了开发React Native。需要再加入几个插件。

a) package controller

在sublime中View>Show Console控制台，复制下面的内容后回车，安装成功后重新启动sublime。

安装这个的目的是可以方便下载其他插件：输入package controller:install package 回车，然后输入我们要的插件就可以install下来了。

//sublime3

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

//sublime2

import urllib2,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

b) react-native-snippets

这个插件快速搭建一个RN开发环境还有一些生命周期的语法，搜索：react-native-snippets。(具体操作看https://packagecontrol.io/packages/react-native-snippets)

c) sublime-react

RN是基于React.js的，都是用JSX语法，是用来显示语法颜色，使代码看起来更漂亮。（具体内容看https://github.com/reactjs/sublime-react）

d) babel

 babel插件支持ES6语法和JSX语法，要比sublime-react添加更多关键字，看起来更舒服。出现问题也会提示。

对比babel和sublime-react，更推荐babel。

 

至此，react-native的开发工具环境就搭建完成了。

 

在实际开发中遇到以下问题：

1.工程目录文件很多，开了一大堆窗口来切换，效率很低。

解决：可以直接拖文件夹进来，sublime左侧会展示目录结构。

2.没有太多的语法提示，定位bug比较难受。

解决：建议改一点代码就跑一下，反正是秒编嘛。

2.atom

经过测试，Atom在install nuclide之后会变得很卡，目前不建议尝试。如果非要尝试，看这篇：http://www.jianshu.com/p/5d772d2c6f5e

相信过不了多久，facebook完善了nuclide插件后，一款强大的rn编辑器就诞生了。

3.WebStorm

目前用过最好使的js编写的ide神器。和idea是同一家公司出的，所以各种像idea和as啊。

logo对比：

   

如果说开发JS像是在陌生的异域打拼，那么用了WebStorm就有一种回家了的感觉。

webstorm11.0.3 新特性描述：更好的支持了react语法。

话不多少，看截图就行，好用不好用，试试就知道。

三、调试工具

安装react dev的chrome插件（地址：官方插件）。在模拟器或真机菜单中选择Debug JS，即可开始调试。

会自动访问 http://localhost:8081/debugger-ui，应当能看到一个页面，或是按F12打开开发者菜单。

槽点：

• 在浏览器改动css后，模拟器的布局不跟着更新。

• 浏览器的dom和手机上的元素位置对不准确。

• debug状态没有关闭的情况下，模拟器会出现超时。