高仿美团客户端 React-Native版,支持iOS、Android
2017-04-21 00:00
197 查看
美团客户端
支持: Android 4.1 (API 16)+ IOS(8.0+)Github:https://github.com/huanxsd/MeiTuan
简书:http://www.jianshu.com/p/9211f42d5c25
iOS截图
iOS_0.png
iOS_1.png
iOS_2.png
Android截图
Android_0.png
Android_1.png
Android_2.png
简介
这是一个用React-Native写的美团客户端。使用了React-Native 0.42版本。遵循ES6语法。
主要实现了美团的四个一级页面(团购、附近、订单、我的),以及部分二级页面(团购详情、Web页面)。
所有功能都是用JavaScript写的,iOS和Android的代码复用率达到了97%(别问我这个数字怎么来的,我瞎掰的)。
这个Demo的静态类型检查工具使用了Facebook的Flow。它让我写JavaScript的时候,更有安全感。个人觉得可以用两个字形容这个工具,那就是:灰常牛逼!
我试着让这个Demo的结构尽量接近实际项目,同时使用比较简单方式去实现功能。这样可以让刚接触ReactNative的人(比如我自己...)更够容易理解代码。
所有的JS代码都在src目录下。
目录结构
Paste_Image.png
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-fluxreact-native-scrollable-tab-view
安装
Clone the repo$ git clone https://github.com/huanxsd/MeiTuan.git $ cd MeiTuan
Install dependencies (npm v3+)
$ npm install
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的朋友,欢迎在下方留言。我会在第一时间回复 :)
最后
如果你喜欢这个Demo,请给我一个star :)Github:https://github.com/huanxsd/MeiTuan
我将持续更新这个Demo
相关文章推荐
- 高仿美团客户端 React-Native版,支持iOS、Android
- react-native-easy-toast, 一款简单易用的 Toast 组件,支持 Android&iOS.
- 好用的ReactNative下拉刷新上拉加载的组件,支持iOS和Android
- 解决 react native 的 webview 组件不支持android客户端上传图片文件问题
- 支持Android iOS,firefox(其它未测)的图片上传客户端预览、缩放、裁切。
- gank.io (干货集中营) react-native版本,同时支持Android和iOS
- react-native-easy-toast, 一款简单易用的 Toast 组件,支持 Android&iOS.
- react-native 可滑动日历,支持ios/android
- 支持android&ios高度自适应及JS相互调用的组件react-native-webview2
- 基于React Native + redux 开发的客户端(适配IOS和Android),可查看保存妹纸,收藏分享文章等
- React Native之(支持iOS与Android)自定义单选按钮(RadioGroup,RadioButton)
- react-native-easy-toast, 一款简单易用的 Toast 组件,支持 Android&iOS.
- 百度知道推客户端APP 同时支持iOS及Android
- 支持Android iOS,firefox(其它未测)的图片上传客户端预览、缩放、裁切。
- 支持android&ios高度自适应及JS相互调用的组件react-native-webview2
- JS判断客户端是否是iOS或者Android
- PHP 判断客户端请求是 Android 还是 IOS
- 浏览器判断是否安装了ios/android客户端程序