關註react native這個技術很久了，去年就做了一個簡單的Demo,最近有時間，重新瞭解了一下react native的現狀，發現已經有很大的進步，現在完善了一下原有的項目，並重新開源共用一下。 背景 對react native這個技術關註很久了，去年也花了很長時間學習，但中途因為時間問題沒有 ...
關註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組件 |
項目結構
代碼全部在source目錄里，其他代碼有react native自動生成，當然，index.js相關入口文件有調整，source中目錄簡單介紹一下：
| 目錄 | 說明 |
|---|---|
| action | redux中的action |
| common | 通用的js常用函數 |
| component | 自己的UI組件 |
| config | 項目的配置信息，需要改成自己項目的，調整這裡。 |
| constant | 定義的一些常量 |
| middleware | react middleware log，記錄state日誌 |
| reducer | redux中的reducer |
| service | 網路請求，調用介面相關 |
| style | 樣式 |
| view | 頁面page |
使用
最基本的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
