易快遞，一款物流查詢跨平臺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、業務和流行的控制元件都有涉及。
1、專案結構主要沿用了類似android專案的結構，如下圖，
主要特點：
- 包主要分為common(通用控制元件)、dao(資料層)、model(實體類)、res(圖片和樣式和常量)、ui(js頁面)、util(通用工具)
- 存放頁面的js資料夾命名以page結尾
-需要複用的元件抽取成單獨一個類，存放到 common包中。 - 圖片、常量、顏色、公共樣式等資源，分別用一個入口類管理，就和 Android 中管理資源的做法類似，這樣更易維護。
2、遇到的坑
- 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官方推薦的方式打包
- 還有很多細節的東西，一時半會也說不清楚，只有真正動手做了才能領會
更多精彩文章請關注微信公眾號"Android經驗分享"：這裡將長期為您分享Android高手經驗、中外開源專案、原始碼解析、框架設計和Android好文推薦！