一起学react native(4) Mobx实现简单购物车

前言

知道mobx这个东西 很久了 大概也就1个多月了吧
但是从来没有下笔写过代码
这两天尝试了一下 大概去熟悉了一下Mobx的相关命令
从而实现了 这个比较简单的购物车实例
如果有写的不对的地方 可以直接联系我的QQ:469373256

这里写图片描述

项目源码:
https://github.com/fangkyi02/Demo
因为项目很简单 所以就直接贴代码了
页面部分写的不是特别美观 还望见谅啊

代码

代码结构

这里写图片描述

红色部分保存了listitem的数据跟视图
黄色部分是对于其的引用

主体实现部分

这里不过多介绍 一看就明白了

这里写图片描述

ListItemData

这里写图片描述

这里写图片描述

ListItemView

这里写图片描述

这里有两点需要注意
1.observe是用来监听某一项的改变的
在这个回调里面 如果全选状态被改变 那么在这边就会被拦截到
然后将当前的item选中状态改成跟全选一样

也许有人会说 这边这么没有写item选中以后的动作呢

2.首先来解释一下 flatlist的话 它是有回收机制的 也就是说 你虽然在当前屏蔽点击了选中 并且状态进行了改变 但是 当你在继续往下滑动的时候 会出现状态依旧没有选中
其次 在那边写的话 点击全选 根本无法做出全选的效果
因为flatlist他不是整个全部都显示出来 而是根据你滑动来加载后面的数据
他默认只加载了你能看到的数据
所以 如果你在监听那边将当前的总金额进行累加的话 你只能累加显示出来的金额 而不能把未显示出来的金额也累加计算进去

LIstItemView_render部分

这里写图片描述

这部分不过多介绍

事件处理部分

这里写图片描述

大体来讲一下部分逻辑
我们的当个物品的金额计算方式
金额 = 标价 * 数量

所以 根据这个原则
当我们点击+ 或者 -的时候
我们这时候要做的 就是修改当前选中值
并且同时修改总金额
但是 这里有个前提是 我们当前已经被选中的情况
否则就会出现数据混乱

所以 当我们按下选中按钮的时候 就应该将金额这个值加进总金额里面
反之 取消的时候 也要从总金额里面减少这个值的钱

ok 逻辑就这么简单

结尾

是不是感觉讲的有点快
主要是因为本身就很简单 可以讲的东西 就那么一点 两三句就讲完了
如果有不懂的 可以自己去下源码 自己电脑运行一下
项目源码:
https://github.com/fangkyi02/Demo

如果源码里面有写的不对的地方 也可以联系我QQ：469373256