易快遞梧乘，一款物流查詢跨平臺(tái)app，功能雖簡(jiǎn)單稼虎，但“麻雀雖小衅檀，五臟俱全”，是本人基于Facebook出品的ReactNative開發(fā)的第一個(gè)跨平臺(tái)app霎俩，Learn once, write anywhere哀军。
本文已授權(quán)微信公眾號(hào)：Android經(jīng)驗(yàn)分享沉眶，在微信公眾號(hào)平臺(tái)原創(chuàng)首發(fā)。
國際案例杉适，有圖有真相：
首頁效果圖
查快遞和物流詳情
寄快遞和掃描
關(guān)于和自定義主題
目前模塊包括：
- 首頁：首頁頂部主要包括了“查快遞”谎倔、”寄快遞“、“掃碼”三大功能模塊猿推，中間有公益愛心捐款的輪播廣告片习，下部主要是最近查詢快遞的實(shí)時(shí)物流信息
- 查快遞：數(shù)據(jù)用了快遞鳥的運(yùn)單識(shí)別、實(shí)時(shí)查詢api蹬叭，支持掃碼識(shí)別藕咏，支持運(yùn)單號(hào)識(shí)別，選擇快遞公司查詢
- 寄快遞：目前主要是一個(gè)列表展示了各大主流快遞公司的客服電話秽五，如果要調(diào)用api下單孽查，信息界面太煩躁，有待后面功能完善
- 掃碼：主要是調(diào)用攝像頭快速識(shí)別運(yùn)單號(hào)查詢快遞
- 自定義顏色主題
技術(shù)框架：
- "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"（滑動(dòng)刪除）
項(xiàng)目運(yùn)行步驟如下：
- 第一步：npm install
- 第二步：react-native link
- 第三步：react-native start
- 第四步：react-native run-android(或 run-ios)
理論兼容Android/ios,但沒在ios真機(jī)上試過坦喘。
總結(jié)心得：
這個(gè)是我開源的第一個(gè)用 RN從零到一 寫的項(xiàng)目了盲再，前面也有仿寫過美團(tuán)app，但只是注重UI起宽，沒涉及的業(yè)務(wù)的代碼編寫洲胖，而這一個(gè)"易查詢"app,無論是ui、業(yè)務(wù)和流行的控件都有涉及坯沪。
1绿映、項(xiàng)目結(jié)構(gòu)主要沿用了類似android項(xiàng)目的結(jié)構(gòu)，如下圖腐晾，
主要特點(diǎn)：
- 包主要分為common(通用控件)叉弦、dao(數(shù)據(jù)層)、model(實(shí)體類)藻糖、res(圖片和樣式和常量)淹冰、ui(js頁面)、util(通用工具)
- 存放頁面的js文件夾命名以page結(jié)尾
-需要復(fù)用的組件抽取成單獨(dú)一個(gè)類巨柒，存放到 common包中樱拴。 - 圖片、常量洋满、顏色晶乔、公共樣式等資源，分別用一個(gè)入口類管理牺勾，就和 Android 中管理資源的做法類似正罢，這樣更易維護(hù)。
項(xiàng)目結(jié)構(gòu)
2驻民、遇到的坑
- react-native版本升級(jí)比較快翻具，有一些控件可能在低版本存在履怯，高版本已經(jīng)獨(dú)立出來了，比如裆泳，從0.44版本開始,Navigator被從react native的核心組件庫中剝離到了一個(gè)名為react-native-deprecated-custom-components的單獨(dú)模塊中
- listview的數(shù)據(jù)源更新了叹洲，但界面沒跟著調(diào)整，這要涉及到數(shù)據(jù)深淺拷貝的問題晾虑，用JSON.parse(JSON.stringify(this.state.traceDatas))深拷貝能解決這個(gè)問題疹味，具體例子可參考本項(xiàng)目的首頁刪除列表功能
- 打包android apk時(shí)不能直接用android studio的可視化generate signed APK打包方式仅叫，這樣打包的apk會(huì)因?yàn)槿鄙賗ndex.android.bundle文件打開時(shí)直接奔潰帜篇，盡量用RN官方推薦的方式打包
- 還有很多細(xì)節(jié)的東西，一時(shí)半會(huì)也說不清楚诫咱，只有真正動(dòng)手做了才能領(lǐng)會(huì)
更多精彩文章請(qǐng)關(guān)注微信公眾號(hào)"Android經(jīng)驗(yàn)分享"：這里將長(zhǎng)期為您分享Android高手經(jīng)驗(yàn)笙隙、中外開源項(xiàng)目、源碼解析坎缭、框架設(shè)計(jì)和Android好文推薦竟痰！
掃一掃加我哦
