前言
最近一直在上课，公众号后台收到了不少学生和朋友的留言和提问。有关于技术的也有关于其他的，后面会整理出来统一回复和交流。留言主要内容是：希望能够推出比较综合的React-Native项目，Vue项目.....。
本系列大前端干货篇共6篇，都是基于现在公司项目开发中比较核心的功能写的Demo，有React-Native，也有Vue写的。第一篇是一个用React-Native写的购物车案例，欢迎转载，希望能帮助到更多的开发者。
一、Demo简介
(一) Demo运行平台
iOS/Android双平台
(二) Demo目构建语言
React-Native 0.44.0版本，遵循ES6+JSX语法
(三) Demo主要功能
购物车界面搭建、建模、商品的添加/删除、总价计算、购买、清空购物车等，涵盖了购物车最主要的功能，可以在此基础上进一步定制...
(四) Demo主要知识点
ES6箭头函数、对象深浅拷贝、通知实现多界面传参、数据模型驱动界面、多界面组件化...
二、Demo安装运行
(一) 下载项目源码
方式一：百度云盘下载
链接: https://pan.baidu.com/s/1qYTUOXY 密码: vkx5
方式二：GitHub下载
https://github.com/xuanzhihua
(二) 运行项目
a）打开终端，输入：cd BGoodsBuy，进到项目目录
b）输入：npm install，下载node_modules
c）运行在iOS设备：react-native run-ios
d）运行在Android设备：react-native run-android
三、主要功能效果截图
图3-1 本地服务器
图3-2 iOS端主要界面截图
图3-3 Android端主要界面截图
四、项目主要结构分析
整个界面在整体上被拆分成三个组件进行复用，分别是：XZHBottomView.js、XZHWineCell.js、XZHMain.js三个文件，其中XZHMain为总集成文件，分别在index.android.js和index.ios.js中进行实例化。
图4-1 项目主要结构
购物车的主要逻辑在于商品的添加和删除、总价的计算，而且要做到全局范围同步，在本案例中主要通过了shop模型驱动了整体的页面，实现一改全改，具体代码备注都很明确，请下载查看。
图4-2 项目核心代码
图4-3 项目核心代码
<p></p>
<p></p>
<p></p>
<p></p>
长按图片-->识别图中二维码
近期正在把公众账号的文章转移到简书，如果要了解第一动态，请关注我的微信公众账号，带你从零到一的进行React Native开发实战，在其他文章中会有对应的code和资料发放！
网友评论