react native之知乎日報原始碼分析一
一、說明
react native出現有一段時間了，最近國內學習react native的人也越來越多。react native開發的資料也很多，具體可以參考：https://github.com/ele828/react-native-guide。
大家可以參考提供的資料，自學使用。年前我也斷斷續續學習了一段時間，今年決定好好研究一番，在例項研究中我選擇了知乎日報，因為自己深受知乎日報的荼毒，原始碼地址：https://github.com/race604/ZhiHuDaily-React-Native。
我將分幾個篇幅進行，在研究例項原始碼的過程中，對其中用到的知識點進行重點講解。
二、下載安裝
下載安裝之前首先要搭建好react native的開發環境，參考地址：http://www.lcode.org/react-native/。
一般情況Mac下環境搭建較為簡單，Windows下容易出現較多問題。
在環境搭建好之後就可以下載知乎日報的原始碼了
git clone https://github.com/race604/ZhiHuDaily-React-Native
下載好之後切換到專案目錄中，執行服務
react-native start
之後，需要重新開啟一個命令列視窗，再切換到專案目錄中，執行
react-native run-android
程式將會自動安裝到手機或是模擬器中（需要提前接入手機或是執行模擬器），成功執行之後的效果
三、功能分析
應用開啟時首先會有一個過渡介面，大約持續2s時間，過渡介面展示一張圖片，伴隨有圖片放大的動畫效果。
然後進入主介面，主介面頂部以圖片輪播的形式展示熱門文章，然後就是文章列表，每個文章以標題加圖片的形式展現。點選左上角選單圖示，顯示側滑選單，使用者可以選擇不同主題的內容，選擇之後主介面的列表隨之變化。其他按鈕功能未實現。
四、目錄結構分析
現在我們看一下原始碼的目錄結構，
| 檔名 | 說明 |
|---|---|
| android | 存放Android原生程式碼 |
| art | 放了幾張截圖 |
| ios | 存放ios原生程式碼 |
| DataRespository.js | 資料倉儲，提供遠端訪問和資料快取功能 |
| DetailToolbar.js | 介面的標題欄元件 |
| index.android.js | android應用的入口 |
| index.ios.js | ios應用的入口 |
| MainScreen.android.js | android應用的主介面 |
| MainScreen.ios.js | ios應用的主介面 |
| SplashScreen.js | 過渡介面 |
| StoriesList.js | 文章列表元件 |
| StoryItem.js | 文章列表元件的子項 |
| StoryScreen.js | 文章詳情介面 |
| SwipeRefreshLayout | 下拉重新整理控制元件，引用原生模組 |
| ThemeList.js | 可訂閱主題的列表 |
| WebView.js | 自定義的WebView，引用原生模組，用於顯示文章詳情 |
五、總結
本篇作為知乎日報（RN版）原始碼分析的第一篇，主要介紹對App的安裝使用做了簡單說明，並且對原始碼的目錄結構進行了介紹，接下來我將根據應用的執行流程對原始碼進行分析，對其中涉及到的RN的知識點進行重點講解，從例項原始碼中學習RN開發的基本技能。