高仿美团客户端 React-Native 版 MeiTuan

MIT
JavaScript
跨平台
2017-04-22
素敌

美团客户端

支持: Android 4.1 (API 16)+ IOS(8.0+)

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中很多页面都使用了同一个网络接口,这不是为了让代码更加简洁,仅仅是我偷懒 >.<

第三方依赖

安装

  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的朋友,欢迎在下方留言。我会在第一时间回复 :)

最后

如果你喜欢这个Demo,请给我一个star :)
我将持续更新这个Demo

加载中

评论(5)

a
arvid_cao
不错不错,楼主辛苦了
robbin-huo
robbin-huo
用什么开发工具?
悦霞
悦霞
咋配置服务器环境用phpstudy咋安装了求大牛解答
keren
keren
厉害,加油
OSC_ObPrue
OSC_ObPrue
tt

暂无资讯

暂无问答

大公司的技术架构相关资料

### 1.[美团大众点评合并:背后技术力量的对比回顾](http://www.infoq.com/cn/news/2015/10/meituan-dianping-tech) ### 2.[mPaaS ](https://www.cloud.alipay.com/docs/2/49549)...

2018/03/15 20:54
17
0
Spring boot 多数据源

网上多是基于XML文件,本文使用基于配置类的方式使用动态数据源。 多数据源原理 Spring作为项目的应用容器,也对多数据源提供了很好的支持,当我们的持久化框架需要数据库连接时,我们需要做...

2016/09/03 14:46
1K
6
如何利用 Myflash 解析 binlog ?

1) 首先需要准备好 Myflash 测试环境 大家可以去这里下载源程序:https://github.com/Meituan-Dianping/MyFlash 这里的测试环境是 Redhat Linux 6.5,直接解压 myflash 无法运行,发现 glib...

2018/08/13 11:20
7
0
MyFlash MySQL闪回工具

安装: 环境要求: 1、binlog格式必须为row,且binlog_row_image=full 2、仅支持5.6与5.7 3、只能回滚DML(增、删、改) 4. 下载地址:https://github.com/Meituan-Dianping/MyFlash 安装: ...

2018/07/26 15:26
12
0
window下配置定时任务实现类似linux的cron定时任务

需求分析: 由于在window本地我已经塔建好爬中代码,不想上传到服务器直接在本地一直爬取就好,所以需要在window下新建定时任务 实现步骤: 1.新建一个.bat文件 这个.bat文件就类似linux的cron里...

01/09 11:47
7
0
终于完成自己的博客小程序

项目简介 这是一个个人博客小程序版,使用 Mpvue 编写而成,服务端使用的是Bmob后端云,无需开发服务端接口即可使用,快速便捷,适合个人使用,功能包括签到,收藏文章,查看文章,消息通知,...

2018/07/02 17:36
142
0
基于mpvue开发微信小程序,vue能用的,用mpvue哪些情况不能用

在使用mpvue开发过程中,会碰到一些在vue中能使用,结果在mpvue不能正常解析到小程序中的情况,下面就列一下,我在开发过程中遇到的一些情况,不断更新中!

2018/05/10 09:52
921
1
美团客户端响应式框架 EasyReact 开源啦

前言 EasyReact 是一款基于响应式编程范式的客户端开发框架,开发者可以使用此框架轻松地解决客户端的异步问题。 目前 EasyReact 已在美团和大众点评客户端的部分业务中实践,并且持续迭代了...

2018/07/23 15:25
105
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部