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版本在火熱更新著，及時關注每個版本的改動是可取的。
