轻松入门react-native

react-native(以下简称RN)的文档比较详细,但是有些知识点很零碎实际做起项目会有些磕磕绊绊,今天从做一个Demo(地址)的思路走下去,讲解一下RN(based on V0.3)

环境配置和创建工程不是重点,直接看这里就好。

IDE可以使用WebStorm或者Visual Studio Code,我用的后者,免费而且插件比较多,如果你也用这个IDE的话推荐下载安装React Native Tools这个插件,有代码提示,而且可以debug RN。

环境都搞定了就可以开始了,打开index.ios.js(index.android.js)这是程序的入口,工程会在init时自动帮你在这里创建一个继承自component的“类”(多说一句,js本身没有类的概念,所以用js实现OO思想可以有许多种写法,class关键字是从ES6开始引入,详细看这里),程序会从这里开始。

接下来我们要找到合适的地方写我们的业务逻辑,关于component类的生命周期回调,有这篇文档

简单总结几个关键的回调函数:

  1. constructor(): 构造函数
  2. render(): 把你需要显示的View返回给RN渲染
  3. componentDidMount(): component加载完毕后调用,render方法之后

所以我们实现render函数,返回一个导航视图,再新建一个AlbumListView,作为导航视图的根视图。

Screen Shot 2016-07-26 at 11.25.24 AM.png

(RN的语法叫JSX,可以在JS里面写类似XML的DOM节点,你可以这样理解:<类名 属性1...属性2...> subview </类名>)

来到AlbumListView.js里,定义AlbumListView类,之后重写render函数,这个页面的结构比较简单,是一个ListView加一个Button(非默认提供的控件,自己写的话就是对一个View进行简单封装,包括监听手势、加文字控件之类的,这里是用的apsl-react-native-button)。

Screen Shot 2016-07-26 at 11.46.01 AM.png

(设置refreshControl属性是让ListView集成下拉刷新控件,style属性会在后面介绍)

每一个Component里有一个state对象比较特殊,尽管你可以把它当作普通对象对待,但是在调用setState之后,UI会被标记为需要重新render一次(不是立即刷新,并且如果当你在调setState之后又马上调this.state(get方法)是不会触发刷新的),所以最好用来存放一些关于刷新UI的内容,ListView要想展示出来,必须要有DataSource,这里我们把ListView的DataSource存放到state对象中。

Screen Shot 2016-07-26 at 11.48.56 AM.png

关于DataSource有这篇文档,这里简单介绍一下,应该叫ListView.DataSource,用来存放ListView将要展示的内容(比如从网络回来的数据、Model等等),把它作为一个类使用就好,如果想更新DataSource就调用它的cloneWithRows(参数传新的数据),同时它有几个比较常用的回调方法我们可以自定义:

  1. rowHasChanged():返回Bool值,每次刷新数据源的时候会回调到这里,返回true会触发ListView刷新这一行,实现这个方法用来比对ListView是否需要刷新
  2. getRowData():返回每一行需要的data,让你自己解析你传给DataSource的数据结构,如果不重写这个方法,会默认给你提供一个方法实现,但不一定他解析的数据结构和你的相符
A4E93005-9427-4622-9C5C-3724851E0F7D.png

有了DataSource后,ListView还需要一个renderRow()方法,让你渲染每一行的View,道理和render函数一样,有一个地方值得注意就是,如果你不想用匿名函数的方式重写这个方法,那么你传入的方法在被回调的过程中是获取不到this这个对象的,也就是说你也没法操作this里的任何属性,这时候就需要在传入方法后面加上.bind(this)绑定上下文

Screen Shot 2016-07-26 at 2.02.29 PM.png

接下来我们在componentDidMount里请求网络数据,然后缓存到本地,下次启动程序先展示本地缓存数据。RN里的网络请求,可以用fetch
如果不想用这种方法,RN还提供了从原生到RN通信机制,比如你是适配iOS工程的话,就可以自定义一个类,然后用AFN请求,之后再回调给RN。

关于本地缓存这块,目前没有看到有相关的API,同时也想试试与原生模块通信这个机制,于是就把本地缓存的逻辑放到了原生类里面,具体做法参考这里

最后一个页面和前面基本相同,有一点就是关于style属性,每一个View都有style属性,用来设置布局、样式等,具体参考这里,挑几个比较常用的介绍一下:

  1. paddingBottom:如果你想让一个View根据内容适应高度,那么在style里限制它距底部的距离就行。

  2. flexDirection : 传row代表横向布局,默认为column纵向布局。

  3. 当alignItems、justifyContent传center时与flexDirection的关系:

flexDirection alignItems justifyContent
column 水平居中 垂直居中
row 垂直居中 水平居中

到这里,剩下的就是一些重复的UI和业务逻辑了,不多说了。

react-native版本在火热更新着,及时关注每个版本的改动是可取的。

推荐阅读更多精彩内容