RN学习2——客户端开发者的一些准备工作

从具体开发实践的角度,这里本应该是第三步,因为第二步是我将现有项目进行了RN集成,并实现了一些混编的小功能后,才逐步总结出来的下面一些实践经验。下面的部分先写一下,第三章再介绍如何集成现有项目并进行简单开发。

一、 RN 开发前的一些必要准备技能

如果你是一个客户端开发,要对js和native的交互很熟悉,起码要懂js的语法,了解react和ES6是怎么回事(本人完全不懂react.js,表示实践起来非常吃力)。

如果你是一个前端开发,那你一定要很熟悉react.js,因为你开发主要靠这个了,混编是一个很有门槛的技术点。

这里主要介绍客户端开发应该具备的知识:

  • 1、javascript的基本语法,变量、命名等等。

    如果你是一个老鸟,估计也就10分钟就好了

  • 2、react.js。

    react facebook给js的重新定义。现在还只是0.14.7,表示这还是一个飞速发展而且尚有不足的组件。非常性感,非常前卫,值得学习。从一个客户端开发者的角度(区别于前端),它的基本特点就是增加了class的概念和生命周期的概念,以及component的概念(js逻辑代码直接嵌套html的jsx语法)。

    这里建议用半天到一天时间进行学习和研究,因为一方面毕竟react和react native在很多api上有着不同,更多的应该在实践中摸索,那样提高更快。开发时网页要常开react的官方文档。

  • 3、ECMAScript 6

    前端开发是程序员届的特殊群体,总是能创造出一些从名字上就高端而又气势磅礴的名词和架构,如果你听到一个新的框架(架构?名称?)后一脸懵逼,这就对了…ES6就是这样一个东西,几乎可以说,ES6只保留了javascript旧版本的一些基本特性(这也就是为什么只要10分钟去看了),它几乎把js变成了一个全新的语言。ES6具有现代语言的各种优点和特性,如果你是一个iOS开发者,那么你就会发现它和swift竟然如此相似。

    ES6要花多少时间看我也不清楚,可能需要一本书。。。

    二、RN server调试tips

    如果服务已经开启了,不能启动server,先找到服务的pid,然后杀掉它:

    $:lsof -n -i4TCP:8081 
    $:kill -9 <PID> 
    

三、选择开发工具

其实无非2个,其它除非很熟悉都不建议。一个是官方推荐的atom+nuclide,另一个是sublime3+若干插件。

第一个的好处是官方推荐,集成各种调试,server,log,断点好多强大功能,缺点是慢,因为这基本是一个IDE。而且在ES6下不能很好的完成代码格式化,亲测2天之后决心放弃。

另一个sublime基本是一个万能的工具了,我一直用它在mac下打开文本文件,写一些脚本,启动超快,而且网上找资料和资源也多。最终决定采用sublime进行开发,具体调试再使用一切其它工具进行辅助,下面简单介绍下sublime针对RN的配置:

  • 1、下载安装 sublime3
  • 2、安装 package controller

    sublime打开状态下下使用快捷键  ctrl+` ,把下面代码输入控制台并回车重启sublime。
    
    
    1
    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)

以后安装插件只需要 cmd+shift+p 后选择 package controller:install package就可以安装了

  • 3、安装 React-native-snippets

    这是一堆RN的快捷键,开发很方便,具体可以参见https://packagecontrol.io/packages/react-native-snippets

  • 4、安装 babel

    这个是支持JSX和ES6的语法高亮。安装后需要通过打开菜单view -> Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel),选择babel为默认 javascript 打开syntax

  • 5、安装 jsxhint

    JSX 代码审查,实时提示语法错误, 帮助快速定位错误点。这个除了安装package外,还要安装Node.js以及通过npm安装jsxhint。

    npm install -g jsxhint
    

    具体可以参考官方文档:https://packagecontrol.io/packages/SublimeLinter-jsxhint

  • 6、安装 jsformat

    代码格式化工具,这个才是最重要的,不能正确格式化RN代码真是一件头疼的问题。format快捷键是ctrl+alt+f,格式化jsx的语法需要在preferences-> Package Settings -> JsFormat -> Setting -> Users,输入以下代码:

    1
    2
    3
    4
    5
     {
    "e4x": true,
    // jsformat options
    "format_on_save": true,
    }