關注react native這個技術很久了，去年就做了一個簡單的Demo,最近有時間，重新了解了一下react native的現狀，發現已經有很大的進步，現在完善了一下原有的項目，并重新開源共享一下。
背景
對react native這個技術關注很久了，去年也花了很長時間學習，但中途因為時間問題沒有進行更深入的學習。當時，react native還存在很多坑，使用起來不太友善。一年過去，現在重新開始關注react native，發現react native已經将原有的很多問題解決，相比當年版本，有太多的進步。現在将原有項目重構并重新釋出到github。
項目簡介
基于部落格園的接口，開發的一個部落格的app工具，包括個人部落格、部落格首頁、部落格詳情，後續會逐漸完善評論、推薦、以及新聞等相關子產品。
使用的主要技術和插件：
| 插件 | 說明 |
|---|---|
| react redux | react state管理方案 |
| react-navigation | react native新的頁面導航方案 |
| react-native-elements | 一個react native UI庫 |
| lodash | JS函數庫 |
| react-native-autoheight-webview | webview解決方案 |
| react-native-vector-icons | react native icon元件 |
項目結構
| 目錄 | |
|---|---|
| action | redux中的action |
| common | 通用的js常用函數 |
| component | 自己的UI元件 |
| config | 項目的配置資訊，需要改成自己項目的，調整這裡。 |
| constant | 定義的一些常量 |
| middleware | react middleware log，記錄state日志 |
| reducer | redux中的reducer |
| service | 網絡請求，調用接口相關 |
| style | 樣式 |
| view | 頁面page |
代碼全部在source目錄裡，其他代碼有react native自動生成，當然，index.js相關入口檔案有調整，source中目錄簡單介紹一下：
使用
最基本的react native使用方式：
git clone https://github.com/itmifen/mfreader.git
npm install
react-native link
react-native run-ios
正常運作需要将config目錄中的index.js檔案中的accessInfo進行配置。clientId和clientSecret可以聯系部落格園團隊擷取。
//cnblogs授權資訊
export const accessInfo={
clientId:"*********",
clientSecret:"**************"
};
首頁展示自己的部落格隻需要修改blogname就可以了。
//app配置資訊
export const appinfo={
blogname:"joylee",
logourl:"https://pic.cnblogs.com/face/42030/20171003230725.png",
cnblogsApi:"https://api.cnblogs.com",
pageSize:10
};
項目技術說明
頁面導航解決方案
之前版本的react native 的頁面導航沒有一個很好的解決方案，最大的問題就是頁面切換的卡頓，很多第三方的導航元件使用起來性能更差，還不如自己開發。現在官方推薦使用 react-navigation 元件進行開發，使用之後的确比之前性能好很多，同時還支援tab、側邊欄導航效果，是以後react native開發必須考慮的方案。
redux
redux現在是react state管理最通用的解決方案，使用非常廣泛，我也不曾想到redux的學習花了我最多的時間。redux是一個state管理的解決方案，是一個單獨的項目，react redux是基于react 的解決方案，而異步的react redux會更加複雜一點。對于redux的學習和使用，經曆了好久才真正了解redux的整個資料流和事件流。
html展示的解決方案
展示webview一直是一個頭疼的問題，雖然通過
https://js.coach可以找到很多webview的解決方案，大部分看起來很好的解決方案是将html轉成原生的jsx節點。實際使用和最終的理想還是有差距的，最後我還是選擇了webview渲染html的方案。我使用的是react-native-autoheight-webview 這個元件，原始的webview元件必須設定高度，react-native-autoheight-webview可以不用設定高度，自動根據内容定義高度。
性能問題
頁面切換性能
強烈建議使用react-navigation，直接使用navigation元件，總是存在卡頓的情況，android環境特别明顯，使用react-navigation整個人都好了。基本不用考慮其他黑科技。
console.log日志對性能非常大的影響
如果一直覺得開發調試的時候系統卡頓明顯，建議把console.log去掉試試，console.log對性能影響嚴重，debug模式下也會感覺比較慢，開發完成後，最好是在release環境下測試下。
清單性能問題
很多人回報清單性能的問題，我一直用listview，暫時沒有感覺到性能的問題，所有還沒有換成新的元件FlatList,後期會考慮替換，相信官方的推薦和解決方案，都是比較靠譜的解決方案。
性能問題大家一定要仔細閱讀 http://reactnative.cn/docs/0.49/performance.html#content 官方的性能說明，每一個都非常重要。
後期計劃
因時間有限，所有在UI上不會做太多的調整，這也不是我擅長的，關于功能會進行逐漸完善：
- 增加新聞子產品
- 增加評論浏覽和評論功能
- 增加部落格園首頁和精華
- 完善個人中心以及相關設定
曾經考慮過做成多個站點聚合資料的形式，但是考慮到工作量的問題，可能短時間内無法實作。
（完）
歡迎大家關注我的公衆号交流、學習、第一時間擷取最新的文章。
微信号：itmifen
