软件简介

这是一个用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

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (5)

加载中
打分: 推荐
不错不错,楼主辛苦了
2018/05/10 22:30
回复
举报
打分: 推荐
用什么开发工具?
2018/01/30 19:06
回复
举报
咋配置服务器环境用phpstudy咋安装了求大牛解答
2017/09/06 10:12
回复
举报
打分: 力荐
厉害,加油
2017/04/24 16:07
回复
举报
tt
2017/04/22 19:27
回复
举报
更多评论
暂无内容
发表于AI & 大数据专区
2017/12/28 11:46

SQL优化神器 —— SQLAdvisor

一、SQLAdvisor是什么 SQLAdvisor是由美团点评公司技术工程部DBA团队(北京)开发维护的一个分析SQL给出索引优化建议的工具。它基于MySQL原生态词法解析,结合分析SQL中的where条件、聚合条件、多表Join关系 给出索引优化建议。目前SQLAdvisor在美团点评内部广泛应用,公司内部对SQLAdvisor的开发全面转到github上,开源和内部使用保持一致。 主要功能:输出SQL索引优化建议 开源地址:https://github.com/Meituan-Dianping/SQL...

1
0
2020/05/30 15:36

大话编程-适配器模式

### 适配器模式(Adapter Pattern) > 将一个类的接口,转换成客户期望的另一个接口。适配器让原本接口不兼容的类可以合作无间。 ### 动机 > 有时候为了复用而设计的工具类不能被复用的原因仅仅是因为他的接口与专业应用领域所需的接口不匹配。 ### 适用场景 * 你想使用一个已经存在的类,而它不符合你的需求。 * 你想创建一个已经存在的类,该类可以与其他不相关的类或不可预见的类(那些接口可能不一定兼容的类)协同工作。 * ...

0
0
发表了博客
2019/10/28 21:33

redis之GeoHash

Redis 提供的 Geo 指令只有 6 个,它只是一个普通的 zset 结构。 增加 geoadd 指令携带集合名称以及多个经纬度名称三元组,注意这里可以加入多个三元组 127.0.0.1:6379> geoadd company 116.48105 39.996794 juejin (integer) 1 127.0.0.1:6379> geoadd company 116.514203 39.905409 ireader (integer) 1 127.0.0.1:6379> geoadd company 116.489033 40.007669 meituan (integer) 1 127.0.0.1:6379> geoadd company 116.56210...

0
0
发表于数据库专区
01/20 11:50

美团图数据库平台建设及业务实践

> 本文为 #nLive vol.001|美团图数据库平台建设及业务实践# 主题演讲的文字稿,可前往 [B站](https://www.bilibili.com/video/BV1qr4y1T7kZ/) 观看本次视频 ![美团图数据库平台建设及业务实践](https://www-cdn.nebula-graph.com.cn/nebula-blog/meituan-graph-database-practice-01.jpg) 大家好,我是来自美团的赵登昌,今天我给大家分享下美团图数据库平台的建设以及业务实践。 ![美团图数据库平台建设及业务实践](https://w...

0
11
01/23 12:09

使用scrapy-splash爬取美团网

案例:爬取美团(https://bj.meituan.com/meishi/)的数据,并保存在文件中 爬取的内容包括:店铺title,地址,平均评分,人均消费 案例步骤: 第一步:创建爬虫项目。 命令行下切换目录到爬虫项目存储目录下-->scrapy startproject meituan 切换目录-->cd meituan 创建爬虫zhipin --> scrapy genspider meituan meituan.com (爬虫名和项目重名,创建失败,修改爬虫名为meituanspider) 第二步:爬取前准备各个文件 在 scrapy...

0
0
发表了博客
2020/07/18 21:29

Redis学习记-近水楼台-GeoHash

近水楼台-GeoHash Redis在3.2版本以后增加了地址位置Geo模块,意味着可以使用Redis来查找附近的XXX。 用数据库来算附近的人 地图元素的位置数据使用二维的经纬度表示,经度范围[-180, 180],纬度范围[-90, 90], 纬度正负以赤道为界,北正南负, 经度正负以本初子午线(英国格林尼治天文台)为界,东正西负。 当两个元素的距离不是很远时,可以直接使用勾股定力计算元素之间的距离。 不过需要注意的是,经纬度坐标的密度不一样,...

2
0
发表了博客
2018/02/01 22:39

如何开启MySQL慢查询日志

1, https://github.com/Meituan-Dianping/SQLAdvisor/blob/master/doc/QUICK_START.md http://www.ttlsa.com/mysql/meituan-sql-optimization-tool-sqladvisor/ https://www.cnblogs.com/dcrq/p/5829145.html 在MySQL客户端中输入命令: show variables like '%quer%'; 其中红框标注的选项是: -slow_query_log是否记录慢查询。用long_query_time变量的值来确定“慢查询”。 -slow_query_log_file慢日志文件路径 -long_query_ti...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
5 评论
85 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部