美团客户端
支持: Android 4.1 (API 16)+ IOS(8.0+)
Github:https://github.com/huanxsd/MeiTuan
Android截图
简介
这是一个用React-Native写的美团客户端。
使用了React-Native 0.42版本。遵循ES6语法。
主要实现了美团的四个一级页面(团购、附近、订单、我的),以及部分二级页面(团购详情、Web页面)。
所有功能都是用JavaScript写的,iOS和Android的代码复用率达到了97%(别问我这个数字怎么来的,我瞎掰的)。并且使用了比较简单的实现方式,让初学者能够容易理解。所有的JS代码都在src目录下。
目录结构
common
通用的工具类
img
所有图片资源
scene
所有场景
widget
通用的UI控件
api.js
网络请求的接口
RootScene.js
App的主入口,开题报告,类似iOS中的RootViewController
该项目没有使用Redux。因为个人觉得目前大部分的中小型App并不需要Redux。如果盲目的将Redux添加到项目中,论文,并不能带来太多的益处。
鲁迅曾说过:
"如果你不知道是否需要 Redux,那就是不需要它。"
Redux的作者 Dan Abramov 说过:
"只有遇到 React 实在解决不了的问题,你才需要 Redux 。"
哦,另外一个没有用Redux的原因,是我还不太会用。
App的页面跳转、TabBar、Navigation,全部通过第三方的库react-native-router-flux)实现。这是一个非常牛逼的库,可以实现很多自定义的跳转功能。
App中很多页面都使用了同一个网络接口,这不是为了让代码更加简洁,仅仅是我偷懒 >.<
第三方依赖react-native-router-flux)
react-native-scrollable-tab-view)
安装1. Clone the repo
`
$ git clone https://github.com/huanxsd/MeiTuan.git
$ cd MeiTuan
`
2. Install dependencies (npm v3+)
`
$ npm install
`
3. Running on iOS
`
$ react-native run-ios
`
Could not connect to development server
打开新的terminal窗口,并执行:
`
$ react-native start
`
我之前一直在写Objective-C,但不久前看了ES6的语法和Flex布局方式后,我便马上爱上了这种开发方式。
这个Demo花了大概5天时间,是我的第一个ReactNative项目。
如果对这个Demo有任何的意见或建议,或者喜欢ReactNative的朋友,欢迎通过QQ联系我
QQ: 67111677
如果你喜欢这个Demo,请给我一个star :)
Github:https://github.com/huanxsd/MeiTuan
我将持续更新这个Demo