|
| 1 | +易快递，一款物流查询跨平台app，功能虽简单，但“麻雀虽小，五脏俱全”，是本人基于Facebook出品的ReactNative开发的第一个跨平台app，Learn once, write anywhere。 |
| 2 | +>本文已授权微信公众号：Android经验分享，在微信公众号平台原创首发。 |
| 3 | +
|
| 4 | +[安装地址](https://fir.im/jeasycheck) |
| 5 | + |
| 6 | +*国际案例，有图有真相：* |
| 7 | + |
| 8 | + |
| 9 | + |
| 10 | + |
| 11 | + |
| 12 | + |
| 13 | + |
| 14 | + |
| 15 | + |
| 16 | + |
| 17 | + |
| 18 | + |
| 19 | + |
| 20 | + |
| 21 | + |
| 22 | +*目前模块包括：* |
| 23 | +- 首页：首页顶部主要包括了“查快递”、”寄快递“、“扫码”三大功能模块，中间有公益爱心捐款的轮播广告，下部主要是最近查询快递的实时物流信息 |
| 24 | +- 查快递：数据用了快递鸟的运单识别、实时查询api，支持扫码识别，支持运单号识别，选择快递公司查询 |
| 25 | +- 寄快递：目前主要是一个列表展示了各大主流快递公司的客服电话，如果要调用api下单，信息界面太烦躁，有待后面功能完善 |
| 26 | +- 扫码：主要是调用摄像头快速识别运单号查询快递 |
| 27 | +- 自定义颜色主题 |
| 28 | + |
| 29 | +*技术框架：* |
| 30 | +- "buffer": "^5.0.6",（base64编码） |
| 31 | +- "react": "16.0.0-alpha.6", |
| 32 | +- "react-native": "0.44.2", |
| 33 | +- "react-native-camera": "^0.6.0",(扫码) |
| 34 | +- "react-native-deprecated-custom-components": "^0.1.0", |
| 35 | +- "react-native-easy-toast": "^1.0.6", |
| 36 | +- "react-native-parallax-scroll-view": "^0.19.0", |
| 37 | +- "react-native-storage": "^0.2.2", |
| 38 | +- "react-native-swipeout": "^2.1.1"（滑动删除） |
| 39 | + |
| 40 | + |
| 41 | +>项目运行步骤如下： |
| 42 | +- 第一步：npm install |
| 43 | +- 第二补：react-native link |
| 44 | +- 第三步：react-native run-android(或 run-ios) |
| 45 | +理论兼容Android/ios,但没在ios真机上试过。 |
| 46 | + |
| 47 | +*总结心得：* |
| 48 | +这个是我开源的第一个用 RN从零到一 写的项目了，前面也有仿写过美团app，但只是注重UI，没涉及的业务的代码编写，而这一个"易查询"app,无论是ui、业务和流行的控件都有涉及。 |
| 49 | + |
| 50 | +1、项目结构主要沿用了类似android项目的结构，如下图， |
| 51 | +主要特点： |
| 52 | +- 包主要分为common(通用控件)、dao(数据层)、model(实体类)、res(图片和样式和常量)、ui(js页面)、util(通用工具) |
| 53 | +- 存放页面的js文件夹命名以page结尾 |
| 54 | +-需要复用的组件抽取成单独一个类，存放到 common包中。 |
| 55 | +- 图片、常量、颜色、公共样式等资源，分别用一个入口类管理，就和 Android 中管理资源的做法类似，这样更易维护。 |
| 56 | + |
| 57 | + |
| 58 | + |
| 59 | +2、遇到的坑 |
| 60 | +- react-native版本升级比较快，有一些控件可能在低版本存在，高版本已经独立出来了，比如，从0.44版本开始,Navigator被从react native的核心组件库中剥离到了一个名为react-native-deprecated-custom-components的单独模块中 |
| 61 | +- listview的数据源更新了，但界面没跟着调整，这要涉及到数据深浅拷贝的问题，用JSON.parse(JSON.stringify(this.state.traceDatas))深拷贝能解决这个问题，具体例子可参考本项目的首页删除列表功能 |
| 62 | +- 打包android apk时不能直接用android studio的可视化generate signed APK打包方式，这样打包的apk会因为缺少index.android.bundle文件打开时直接奔溃，尽量用RN官方推荐的方式打包 |
| 63 | +- 还有很多细节的东西，一时半会也说不清楚，只有真正动手做了才能领会 |
| 64 | + |
| 65 | +最后附上下载地址和源码 [Github源码](https://github.com/jaydenxiao2016/JEasyCheck) [安装地址](https://fir.im/jeasycheck) |
| 66 | + |
| 67 | +更多精彩文章请关注微信公众号"**Android经验分享**"：这里将长期为您分享Android高手经验、中外开源项目、源码解析、框架设计和Android好文推荐！ |
| 68 | + |
| 69 | + |
0 commit comments