基於ReactNative實現的博客園手機客戶端

注：升級版本請移步：http://www.cnblogs.com/mcmurphy/p/5934993.html

去年九月，facebook發佈了react-native，將web端的javaScript和react技術擴展到了IOS和Android的原生應用開發。用一句大白話來講，就是利用相同的核心代碼，就能夠搞出androidapp，iosapp，以及後臺應用程序。同時，得益於它的熱更新能力，軟件更新再也不須要用戶下載新的安裝包，就像傳統的web網頁同樣，服務器有修改，終端可即時接觸到最新內容。多端技術統一，熱更新，原生的體驗，真正擁有了這些，才發現當前廣泛的移動端開發有多麼蛋疼。就像桌面時代的cs結構程序開發很大程度上已經被bs結構所取代同樣，移動端的這一進程，會進行的更快。

出於學習及實踐的目的，此次用react-native構建了一個博客園的手機客戶端，由於沒有ios的開發環境（窮），因此當前僅僅支持安卓平臺（>=android 4.1.6），但適配ios的話，預估至多也就20%的工做量。

實現功能

• 首頁 & 排行 & 新聞等列表查看
• 博文詳情 & 新聞詳情查看
• 熱門博主查看及博主檢索
• 博主詳情及博主博文列表
• 博文評論 & 新聞評論查看
• 博主及新聞離線收藏及查看
• 設置 & 關於
• CodePush代碼熱更新

因爲博客園官方開放接口所限，而我又不傾向於經過非正規手段實現目的，如下列舉一些很重要但並未實現的功能：

• 用戶登陸
• 發表評論
• 博文發表
• 博文分類別查看
• 評論消息通知等。

頁面截圖

下載入口

可掃碼直接下載體驗：

或訪問如下連接下載：
http://fir.im/togayther

存在的問題

• 詳情頁面HTML解析組件仍然存在一些性能和細節問題，對於一些長博客的渲染會耗費比較長的時間。
• 博主詳情、博文詳情等接口會出現偶爾不會返回數據的問題。
• 接口返回的數據格式爲xml，對於前端的解析不夠友好。我我的搭建了一個php的中間層。因此客戶端請求的接口地址爲：123.56.135.166。
• 當前app引用的圖標爲本身創做，由於找了好久也沒有找到博客園相關的app圖標資源。不知道這樣會不會有什麼問題。
• 站內連接應用內跳轉查看（官方博文詳情接口調用須要傳入博文id，但不少博文都自定義了連接，這個還須要再斟酌一下）。
• 一些性能問題。
• IOS適配的問題，看接下來個人時間安排吧。
• 其它一些交互及功能完善。

源碼地址

https://github.com/togayther/react-native-cnblogs
有任何問題，可在博文下方留言，或提交issue。

一點後話

在可預知的將來，構建移動端產品的工具及生產力，必定會伴隨着科學技術的發展，變得愈來愈簡單和統一。你很難想像時代的進步造福了全人類，但IT從業人員卻仍然苦逼的爲了兼容各大平臺而感受身體被掏空。就像如今不少原生開發人員開始抱怨工做沒有前幾年那麼好找，其實必定程度上，緣於不少公司的技術選型發生了變化，更加傾向於以一種輕便統一的方式構建業務應用，react-native 當前在業內的熱度也印證了這一點。做爲技術人員，應該時刻關注行業動態，擴展視野，更新本身的技術棧，才能保證本身的競爭力。在這裏祝各位園友工做順利，也祝博客園緊跟移動互聯網浪潮，愈來愈好！