RN学习之路第一个demo,仿美团外卖,供萌新参考



  • DUHAPP

    基于React-native的仿美团外卖APP

    使用技术&工具&第三方库

    • React,React-native框架
    • react-native-router-flux 页面切换,传值的第三方库
    • react-native-scrollable-tab-view 界面滑动切换第三方库
    • react-native-swiper 滑动切换第三方库

    DEMO演示: http://htmlpreview.github.io/?https://github.com/beastwinside/APP/blob/master/index.html

    说明

    本demo为本人学习React-native的第一个demo,参照REACT-NATIVE社区的“高仿美团rnapp”进行学习编写,准备作为这学期的安卓课程的课程设计。

    原帖地址:http://bbs.reactnative.cn/topic/3742/高仿美团客户端-react-native版-支持ios-android

    因为没有mac,所以只做了安卓部分的真机测试,数据来自本地读取的json文件,并非从网络获取,按道理ios上运行也是没问题的。

    由于本人也是react,react-native新手上路,在摸索着写这个app,以及之前的重构天猫超市的React DEMO中,积累了很多的坑,并把相应资料存在源代码目录文件夹中,方便同学react,react-native的同学参考,避开坑。

    本demo不算上研究大神的rnapp的时间,从自己开始动手写到大致完成大概用了10天左右。目前可以说算入门了。编写过程中很多时间也是浪费在了寻找解决无意义的坑的地方。

    因此准备在后续稍微空闲之后,把这个app与之前的重构天猫react app的源码上,加上注释,并整理一些踩坑集锦,来方便react,rn新手学习。大神的话就不要来吐槽了--

    运行

    1 确保在跑得了rn中文网test demo的情况下,fork我的demo到本地

    2 在根目录命令行键入npm install来安装环境依赖(再次确认应该已经装了npm等)

    3 连接安卓模拟器或者安卓真机,执行react-native run-android,如果是安卓真机通过usb连接,执行命令后请关闭node开的服务器。

    4 打开meituan app即可见效果。

    基本功能演示截图

    不知道怎么在这上传图片,来我github项目首页看就行
    https://github.com/beastwinside/DUHAPP

    ###本人qq 1584824430,欢迎同起步的新人来骚扰一起成长,大神就免了
    ###如果本demo对你学习有帮助,请让我骗些star

    另外重构天猫超市的REACT demo链接,同样新手向
    https://github.com/beastwinside/APP



  • 手贱贴错demo演示链接,贴成react demo的链接,无视就好,下面给的源码地址有截图。


  • administrators

    0_1495068939416_TIM截图20170518085530.png
    点这里传图



  • 3_1495083940151_4.png 2_1495083940151_3.png 1_1495083940151_2.png 0_1495083940150_1.png 3_1495083948547_9.png 2_1495083948547_8.png 1_1495083948547_7.png 0_1495083948547_6.png


登录后回复