React Native开源项目-仿美团客户端(Android、iOS双适配)
简介
这是一个用React-Native写的美团客户端。
@huanxsd开发的基于React-Native实现的仿美团客户端,开源地址:https://github.com/huanxsd/MeiTuan
欢迎大家star,fork....
本开源项目由江清清的技术专栏整理(http://www.lcode.org/)
使用了React-Native 0.44.0版本。遵循ES6语法。
主要实现了美团的四个一级页面(团购、附近、订单、我的),以及部分二级页面(团购详情、Web页面)。
所有功能都是用JavaScript写的,iOS和Android的代码复用率达到了97%(别问我这个数字怎么来的,我瞎掰的)。
这个Demo的静态类型检查工具使用了Facebook的Flow。它让我写JavaScript的时候,更有安全感。个人觉得可以用两个字形容这个工具,那就是:灰常牛逼!
我试着让这个Demo的结构尽量接近实际项目,同时使用比较简单方式去实现功能。这样可以让刚接触ReactNative的人(比如我自己...)更够容易理解代码。
该项目没有使用Redux。因为个人觉得目前大部分的中小型App并不需要Redux。如果盲目的将Redux添加到项目中,并不能带来太多的益处。
鲁迅曾说过:
"如果你不知道是否需要 Redux,那就是不需要它。"
Redux的作者 Dan Abramov 说过:
"只有遇到 React 实在解决不了的问题,你才需要 Redux 。"
哦,另外一个没有用Redux的原因,是我还不太会用。
App的页面跳转、TabBar、Navigation,全部通过react-navigation实现。这是一个非常牛逼的库,可以实现很多自定义的跳转功能。最早是通过react-native-router-flux实现跳转。在遇见react-navigation后,我果断放弃了react-native-router-flux。
App中很多页面都使用了同一个网络接口,这不是为了让代码更加简洁,仅仅是我偷懒 >.<
React Native交流10群:157867561,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
项目中使用到的第三方库依赖信息如下:
1.react-navigation(https://github.com/react-community/react-navigation)
2.react-native-scrollable-tab-view(https://github.com/skv-headless/react-native-scrollable-tab-view)
安装运行
git clone https://github.com/huanxsd/MeiTuan.git
cd MeiTuan
npm install (npm v3+)
react-native run-ios or react-native run-android
运行截图
相关文章
- Android和iOS的设计不同之处
- Android学习网站(1)
- 毫无保留开源我写的:IOS Android Ipad 多点触摸通用js 库
- 拉拢苹果用户,谷歌推出“从iOS转移到Android”App
- 谈谈-Android Studio 调试功能
- ios 仿android gallery控件
- android jni——helloworld
- windows 64位下,React-Native环境搭建详解 (Android)
- Android无线调试方法(Root和非Root)
- 移动端开发遇到的问题以及解决方案以及开发经验(多半是样式造成的兼容性问题在Android和ios表现出入)
- 2022年跨端(Ios/Android)方案调研
- app:transformClassesWithJarMergingForDebug uplicate entry: android/support/v4/app/BackStackState$1.class
- Android中关于JNI 的学习(五)在C文件里使用LogCat
- Android 页面滑动悬浮资源位动画+滑动监听解决方案
- Rx Android Rx java Rx js Rx Dart RxCpp Rx.NET RxPy Rx.rb 所以Rx到底是什么?
- Android添加快捷方式(Short)到手机桌面
- Android studio 3.0 查看手机文件系统
- android和ios流媒体库推荐
- android ButterKnife 解决重复findViewById
- react-native 实现条码扫描(ios&android)
- react-native 实现百度地图(ios&Android)
- ReactNative实战系列 组件封装之Dialog(iOS和Android通用)
- 《React-Native系列》19、 ListView组件之上拉刷新(iOS和Android通用)
- JS判断客户端是否是iOS或者Android手机移动端
- 基于React-Native的高仿「ONE·一个」,兼容Android、iOS双平台
- 【Android 安装包优化】WebP 应用 ( Android 中使用 libwebp.so 库编码 WebP 图片 )
- android和ios流媒体库推荐