RN开源:MeiTuan-高仿美团客户端 React-Native版,支持iOS、Android
baaqfxvn
7年前
<h2>简介</h2> <p>这是一个用React-Native写的美团客户端。</p> <p>使用了React-Native 0.44.0版本。遵循ES6语法。</p> <p>主要实现了美团的四个一级页面(团购、附近、订单、我的),以及部分二级页面(团购详情、Web页面)。</p> <p>所有功能都是用JavaScript写的,iOS和Android的代码复用率达到了97%(别问我这个数字怎么来的,我瞎掰的)。</p> <p>这个Demo的静态类型检查工具使用了非死book的Flow。它让我写JavaScript的时候,更有安全感。个人觉得可以用两个字形容这个工具,那就是:灰常牛逼!</p> <p>我试着让这个Demo的结构尽量接近实际项目,同时使用比较简单方式去实现功能。这样可以让刚接触ReactNative的人(比如我自己...)更够容易理解代码。</p> <p>该项目没有使用Redux。因为个人觉得目前大部分的中小型App并不需要Redux。如果盲目的将Redux添加到项目中,并不能带来太多的益处。</p> <p>鲁迅曾说过:</p> <p>"如果你不知道是否需要 Redux,那就是不需要它。"</p> <p>Redux的作者 Dan Abramov 说过:</p> <p>"只有遇到 React 实在解决不了的问题,你才需要 Redux 。"</p> <p>哦,另外一个没有用Redux的原因,是我还不太会用。</p> <p>App的页面跳转、TabBar、Navigation,全部通过 react-navigation 实现。这是一个非常牛逼的库,可以实现很多自定义的跳转功能。最早是通过 react-native-router-flux 实现跳转。在遇见react-navigation后,我果断放弃了react-native-router-flux。</p> <p>App中很多页面都使用了同一个网络接口,这不是为了让代码更加简洁,仅仅是我偷懒 >.<</p> <p>React Native交流10群: 157867561 ,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!</p> <p>项目中使用到的第三方库依赖信息如下:</p> <p>1.react-navigation( <a href="/misc/goto?guid=4959748322879391448" rel="nofollow,noindex">https://github.com/react-community/react-navigation</a> )</p> <p>2.react-native-scrollable-tab-view( <a href="/misc/goto?guid=4959675100018189231" rel="nofollow,noindex">https://github.com/skv-headless/react-native-scrollable-tab-view</a> )</p> <h2>安装运行</h2> <p>git clone https://github.com/huanxsd/MeiTuan.git</p> <p>cd MeiTuan</p> <p>npm install (npm v3+)</p> <p>react-native run-ios or react-native run-android</p> <h2>运行截图</h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/37fae18ef6130fcfda50b00d75e1489d.png"></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/03a4713197abbe9247eb92ab2805ded6.png"></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/2aadd2ce953cc253885b27cba9480362.png"></p> <p> </p> <p> </p> <p>项目主页:<a href="http://www.open-open.com/lib/view/home/1494224179062">http://www.open-open.com/lib/view/home/1494224179062</a></p> <p> </p>