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类的生命周期回调，有这篇文档
简单总结几个关键的回调函数：
- constructor(): 构造函数
- render(): 把你需要显示的View返回给RN渲染
- componentDidMount(): component加载完毕后调用，render方法之后
所以我们实现render函数，返回一个导航视图，再新建一个AlbumListView，作为导航视图的根视图。
（RN的语法叫JSX，可以在JS里面写类似XML的DOM节点，你可以这样理解：<类名 属性1...属性2...> subview </类名>）
来到AlbumListView.js里，定义AlbumListView类，之后重写render函数，这个页面的结构比较简单，是一个ListView加一个Button（非默认提供的控件，自己写的话就是对一个View进行简单封装，包括监听手势、加文字控件之类的，这里是用的apsl-react-native-button）。
（设置refreshControl属性是让ListView集成下拉刷新控件，style属性会在后面介绍）
每一个Component里有一个state对象比较特殊，尽管你可以把它当作普通对象对待，但是在调用setState之后，UI会被标记为需要重新render一次（不是立即刷新，并且如果当你在调setState之后又马上调this.state（get方法）是不会触发刷新的），所以最好用来存放一些关于刷新UI的内容，ListView要想展示出来，必须要有DataSource，这里我们把ListView的DataSource存放到state对象中。
关于DataSource有这篇文档，这里简单介绍一下，应该叫ListView.DataSource，用来存放ListView将要展示的内容（比如从网络回来的数据、Model等等），把它作为一个类使用就好，如果想更新DataSource就调用它的cloneWithRows(参数传新的数据)，同时它有几个比较常用的回调方法我们可以自定义：
- rowHasChanged()：返回Bool值，每次刷新数据源的时候会回调到这里，返回true会触发ListView刷新这一行，实现这个方法用来比对ListView是否需要刷新
- getRowData()：返回每一行需要的data，让你自己解析你传给DataSource的数据结构，如果不重写这个方法，会默认给你提供一个方法实现，但不一定他解析的数据结构和你的相符
有了DataSource后，ListView还需要一个renderRow()方法，让你渲染每一行的View，道理和render函数一样，有一个地方值得注意就是，如果你不想用匿名函数的方式重写这个方法，那么你传入的方法在被回调的过程中是获取不到this这个对象的，也就是说你也没法操作this里的任何属性，这时候就需要在传入方法后面加上.bind(this)绑定上下文
接下来我们在componentDidMount里请求网络数据，然后缓存到本地，下次启动程序先展示本地缓存数据。RN里的网络请求，可以用fetch，
如果不想用这种方法，RN还提供了从原生到RN通信机制，比如你是适配iOS工程的话，就可以自定义一个类，然后用AFN请求，之后再回调给RN。
关于本地缓存这块，目前没有看到有相关的API，同时也想试试与原生模块通信这个机制，于是就把本地缓存的逻辑放到了原生类里面，具体做法参考这里。
最后一个页面和前面基本相同，有一点就是关于style属性，每一个View都有style属性，用来设置布局、样式等，具体参考这里，挑几个比较常用的介绍一下：
paddingBottom：如果你想让一个View根据内容适应高度，那么在style里限制它距底部的距离就行。
flexDirection : 传row代表横向布局，默认为column纵向布局。
当alignItems、justifyContent传center时与flexDirection的关系：
| flexDirection | alignItems | justifyContent |
|---|---|---|
| column | 水平居中 | 垂直居中 |
| row | 垂直居中 | 水平居中 |
到这里，剩下的就是一些重复的UI和业务逻辑了，不多说了。
react-native版本在火热更新着，及时关注每个版本的改动是可取的。
