高仿美团客户端 React-Native版,支持iOS、Android



  • 美团客户端

    支持: Android 4.1 (API 16)+ IOS(8.0+)
    Github:https://github.com/huanxsd/MeiTuan
    简书:http://www.jianshu.com/p/9211f42d5c25

    iOS截图
    2_1492419304257_iOS_2.png
    1_1492419304256_iOS_1.png
    0_1492419304256_iOS_0.png
    Android截图

    2_1492419315844_Android_2.png
    1_1492419315843_Android_1.png
    0_1492419315843_Android_0.png

    简介

    这是一个用React-Native写的美团客户端。
    使用了React-Native 0.42版本。遵循ES6语法。
    主要实现了美团的四个一级页面(团购、附近、订单、我的),以及部分二级页面(团购详情、Web页面)。
    所有功能都是用JavaScript写的,iOS和Android的代码复用率达到了97%(别问我这个数字怎么来的,我瞎掰的)。并且使用了比较简单的实现方式,让初学者能够容易理解。所有的JS代码都在src目录下。

    该项目没有使用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
    安装

    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
    瞎扯蛋

    我写了6年的Objective-C,但是不久前我看了ES6的语法和Flex布局方式后,我爱上了这种开发方式。这个项目花了我5天时间,是我的第一个ReactNative项目。
    如果对这个项目有任何的建议,或者喜欢ReactNative的朋友,欢迎通过QQ联系我
    QQ: 67111677

    最后

    如果你喜欢这个项目,请给我一个star :)
    Github:https://github.com/huanxsd/MeiTuan
    简书:http://www.jianshu.com/p/9211f42d5c25
    如果关注的人多,我将持续更新这个项目



  • 你好.. 请问下你是如何学习的呢 我看了你的源码 效果 那些都写得很好啊 不过代码里面有很多在官网上面都找不到文档呢.. 你是在哪里找到得呢... 比如 tabNavigator 这个官网就没有提到这个


登录后回复