基於react native打造屬於自己的部落格app

IT米粉發表於2017-10-17
React NativeAPP

關注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一直是一個頭疼的問題，雖然通過 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,後期會考慮替換，相信官方的推薦和解決方案，都是比較靠譜的解決方案。

效能問題大家一定要仔細閱讀 reactnative.cn/docs/0.49/p… 官方的效能說明，每一個都非常重要。

後期計劃

因時間有限，所有在UI上不會做太多的調整，這也不是我擅長的，關於功能會進行逐步完善：

  • 增加新聞模組
  • 增加評論瀏覽和評論功能
  • 增加部落格園首頁和精華
  • 完善個人中心以及相關設定

曾經考慮過做成多個站點聚合資料的形式，但是考慮到工作量的問題，可能短時間內無法實現。

（完）

歡迎大家關注我的公眾號交流、學習、第一時間獲取最新的文章。
微訊號：itmifen

相關文章