所有代碼托管在：https://github.com/liuxiaocong/cznews

參照提交log學(xué)習(xí)效果更佳

本期內(nèi)容：初始框架搭建：React + React navigation + Redux , fetch功能調(diào)試，html內(nèi)容解析嘗試。

這部分難點(diǎn)在于步驟3：react-native + redux 與 navigation框架的整合。

（1）初始化react-native項(xiàng)目

? ? ? ?參照：https://facebook.github.io/react-native/docs/getting-started.html，選擇“Building Projects with Native Code”，照著步驟做一次，react-native 0.46版本后，新加了Expo工具，方面快速代碼調(diào)試，但個(gè)人建議還是用舊的模式，便于更好理解創(chuàng)建原生app的整個(gè)流程。使用react和react-natvie版本如下：

"react":"16.0.0-alpha.12",

"react-native":"0.46.4",

創(chuàng)建完成后，我們對(duì)項(xiàng)目目錄進(jìn)行一點(diǎn)修改，在根目錄下創(chuàng)建js文件夾，用于專門存放js相關(guān)的代碼。在js下新建App.js，加入以下代碼：

同時(shí)修改index.ios.js和index.android.js，讓入口文件都加載app模塊，代碼如下：

第一步到此結(jié)束，此時(shí)在terminal下運(yùn)行react-natvie run-ios，看到的界面為：

（2）加入React navigation

React navigation主要用于管理和實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)，配置頂部action bar，和tab布局，官方網(wǎng)址：https://reactnavigation.org。之前也用過(guò)其他導(dǎo)航庫(kù)，比如大名鼎鼎的react-native-router-flux?,但說(shuō)實(shí)話沒(méi)有一個(gè)好用的，React navigation在ios和android下的表現(xiàn)也有很多不一致，主要應(yīng)該是因?yàn)槠脚_(tái)間activity的實(shí)現(xiàn)區(qū)別，但這個(gè)庫(kù)目前已經(jīng)被官方采納，相比其他的明顯有更大的優(yōu)勢(shì)，ui問(wèn)題等我們后期完成得差不多再做調(diào)整，先以ios平臺(tái)實(shí)現(xiàn)為主。