一、說明
react native出現(xiàn)有一段時間了，最近國內(nèi)學(xué)習(xí)react native的人也越來越多。react native開發(fā)的資料也很多，具體可以參考：https://github.com/ele828/react-native-guide。
大家可以參考提供的資料，自學(xué)使用。年前我也斷斷續(xù)續(xù)學(xué)習(xí)了一段時間，今年決定好好研究一番，在實例研究中我選擇了知乎日報，因為自己深受知乎日報的荼毒，源碼地址：https://github.com/race604/ZhiHuDaily-React-Native。
我將分幾個篇幅進行，在研究實例源碼的過程中，對其中用到的知識點進行重點講解。
二、下載安裝
下載安裝之前首先要搭建好react native的開發(fā)環(huán)境，參考地址：http://www.lcode.org/react-native/。
一般情況Mac下環(huán)境搭建較為簡單，Windows下容易出現(xiàn)較多問題。
在環(huán)境搭建好之后就可以下載知乎日報的源碼了
git clone https://github.com/race604/ZhiHuDaily-React-Native
下載好之后切換到項目目錄中，首先安裝依賴的包，執(zhí)行
npm install
然后運行服務(wù)
react-native start
之后，需要重新打開一個命令行窗口，再切換到項目目錄中，執(zhí)行
react-native run-android
程序?qū)詣影惭b到手機或是模擬器中（需要提前接入手機或是運行模擬器），成功運行之后的效果
三、功能分析
應(yīng)用打開時首先會有一個過渡界面，大約持續(xù)2s時間，過渡界面展示一張圖片，伴隨有圖片放大的動畫效果。
然后進入主界面，主界面頂部以圖片輪播的形式展示熱門文章，然后就是文章列表，每個文章以標(biāo)題加圖片的形式展現(xiàn)。點擊左上角菜單圖標(biāo)，顯示側(cè)滑菜單，用戶可以選擇不同主題的內(nèi)容，選擇之后主界面的列表隨之變化。其他按鈕功能未實現(xiàn)。
四、目錄結(jié)構(gòu)分析
現(xiàn)在我們看一下源碼的目錄結(jié)構(gòu)，
| 文件名 | 說明 |
|---|---|
| android | 存放Android原生代碼 |
| art | 放了幾張截圖 |
| ios | 存放ios原生代碼 |
| DataRespository.js | 數(shù)據(jù)倉儲，提供遠程訪問和數(shù)據(jù)緩存功能 |
| DetailToolbar.js | 界面的標(biāo)題欄組件 |
| index.android.js | android應(yīng)用的入口 |
| index.ios.js | ios應(yīng)用的入口 |
| MainScreen.android.js | android應(yīng)用的主界面 |
| MainScreen.ios.js | ios應(yīng)用的主界面 |
| SplashScreen.js | 過渡界面 |
| StoriesList.js | 文章列表組件 |
| StoryItem.js | 文章列表組件的子項 |
| StoryScreen.js | 文章詳情界面 |
| SwipeRefreshLayout | 下拉刷新控件，引用原生模塊 |
| ThemeList.js | 可訂閱主題的列表 |
| WebView.js | 自定義的WebView，引用原生模塊，用于顯示文章詳情 |
五、總結(jié)
本篇作為知乎日報（RN版）源碼分析的第一篇，主要介紹對App的安裝使用做了簡單說明，并且對源碼的目錄結(jié)構(gòu)進行了介紹，接下來我將根據(jù)應(yīng)用的執(zhí)行流程對源碼進行分析，對其中涉及到的RN的知識點進行重點講解，從實例源碼中學(xué)習(xí)RN開發(fā)的基本技能。
