從零到一：用ReactNative開發的第一個跨平臺app

易快遞，一款物流查詢跨平臺app，功能雖簡單，但「麻雀雖小，五臟俱全」，是本人基於Facebook出品的ReactNative開發的第一個跨平臺app，Learn once, write anywhere。

本文已受權微信公衆號：Android經驗分享，在微信公衆號平臺原創首發。

APK安裝地址
國際案例，有圖有真相：

首頁效果圖

查快遞和物流詳情

寄快遞和掃描

關於和自定義主題

目前模塊包括：

• 首頁：首頁頂部主要包括了「查快遞」、」寄快遞「、「掃碼」三大功能模塊，中間有公益愛心捐款的輪播廣告，下部主要是最近查詢快遞的實時物流信息
• 查快遞：數據用了快遞鳥的運單識別、實時查詢api，支持掃碼識別，支持運單號識別，選擇快遞公司查詢
• 寄快遞：目前主要是一個列表展現了各大主流快遞公司的客服電話，若是要調用api下單，信息界面太煩躁，有待後面功能完善
• 掃碼：主要是調用攝像頭快速識別運單號查詢快遞
• 自定義顏色主題

技術框架：

• "buffer": "^5.0.6",（base64編碼）
• "react": "16.0.0-alpha.6",
• "react-native": "0.44.2",
• "react-native-camera": "^0.6.0",(掃碼)
• "react-native-deprecated-custom-components": "^0.1.0",
• "react-native-easy-toast": "^1.0.6",
• "react-native-parallax-scroll-view": "^0.19.0",
• "react-native-storage": "^0.2.2",
• "react-native-swipeout": "^2.1.1"（滑動刪除）

項目運行步驟以下：

• 第一步：npm install
• 第二補：react-native link
• 第三步：react-native run-android(或 run-ios)
  理論兼容Android/ios,但沒在ios真機上試過。

總結心得：
這個是我開源的第一個用 RN從零到一 寫的項目了，前面也有仿寫過美團app，但只是注重UI，沒涉及的業務的代碼編寫，而這一個"易查詢"app,不管是ui、業務和流行的控件都有涉及。

一、項目結構主要沿用了相似android項目的結構，以下圖，
主要特色：

• 包主要分爲common(通用控件)、dao(數據層)、model(實體類)、res(圖片和樣式和常量)、ui(js頁面)、util(通用工具)
• 存放頁面的js文件夾命名以page結尾
  -須要複用的組件抽取成單獨一個類，存放到 common包中。
• 圖片、常量、顏色、公共樣式等資源，分別用一個入口類管理，就和 Android 中管理資源的作法相似，這樣更易維護。

項目結構

二、遇到的坑

• react-native版本升級比較快，有一些控件可能在低版本存在，高版本已經獨立出來了，好比，從0.44版本開始,Navigator被從react native的核心組件庫中剝離到了一個名爲react-native-deprecated-custom-components的單獨模塊中
• listview的數據源更新了，但界面沒跟着調整，這要涉及到數據深淺拷貝的問題，用JSON.parse(JSON.stringify(this.state.traceDatas))深拷貝能解決這個問題，具體例子可參考本項目的首頁刪除列表功能
• 打包android apk時不能直接用android studio的可視化generate signed APK打包方式，這樣打包的apk會由於缺乏index.android.bundle文件打開時直接奔潰，儘可能用RN官方推薦的方式打包
• 還有不少細節的東西，一時半會也說不清楚，只有真正動手作了才能領會

最後附上下載地址和源碼 Github源碼 安裝地址

更多精彩文章請關注微信公衆號"Android經驗分享"：這裏將長期爲您分享Android高手經驗、中外開源項目、源碼解析、框架設計和Android好文推薦！

掃一掃加我哦