React Native开发之双层购物车的简单设计与实现

最近从事React Native开发，有需求是做购物车界面。在网上查询了一番，大多都是单层的购物车，即局部单选和多选。但是主流的购物车界面都是有店铺单选、多选及商品的单选和多选的，所以用自己所学知识自己写了一个双层的购物车。
学习阶段，如果哪部分有问题，欢迎指正，共同探讨。@Apach3

---

我设计的时候是这样想的：
1. 页面分为三部分：导航栏、商品栏、价格栏；
2. 商品栏用FlatList实现，每个店铺都是对应的row；
3. 将不同商品push进数组里，然后返回给每个row；
4. 在最底层页面拿到数据，对数据处理，根据店铺分类，再将不同的店铺及商品追加对象字段select: true/false；

handleData = (array) => {//处理数据格式
        let nameArray = []; //  店名数组
        array.map(
            (item) => {
                nameArray.push(item.storeName);
            }
        );
        let storeNameArray = Array.from(new Set(nameArray));
        this.shopObjArray = [];
        storeNameArray.map(
            (item) => {
                this.shopObjArray.push({storeName: item, data: [], select: false});
            }
        );
        array.map(
            (item) => {
                for (let i = 0; i < this.shopObjArray.length; i++) {
                    if (this.shopObjArray[i].storeName == item.storeName) {
                        this.shopObjArray[i].data.push({data: item, select: false, number: 1});
                    }
                }
            }
        );
        this.loading = false;
        this.refs.buylist.judgeLoading(this.loading);
        this.refs.buylist.freshData(this.shopObjArray);
    }

5. 每个组件内容的值，均由最底层页面通过ref调用该类方法，传值过去刷新相应区域；
6. 点击全选后，回调去更新数据源对应的state，再将相应改变的部分新数据源传给对应组件，通过ref调用方法刷新组件；

changeHeaderData = (index) => {//点击店铺头部全选对应数据操作
        let newStatus = !this.shopObjArray[index].select
        this.shopObjArray[index].select = newStatus;
        this.shopObjArray[index].data.map(
            (item, index) => {
                item.select = newStatus;
            }
        );
        this.refs.buylist.reRenderStore(this.shopObjArray[index], index);
        this.judgeStoreCheck();
    }

7. 点击单选后，回调去更新数据源对应state，同时判断是否该店铺下商品全部已被单选，如果全被单选则更新店铺全选按钮，反之不更新；

changeStoreGoodsCheck = (storeIndex, index) => {//改变商铺对应下商品的选择状态
        let newStatus = !this.shopObjArray[storeIndex].data[index].select;
        this.shopObjArray[storeIndex].data[index].select = newStatus;
        this.refs.buylist.reRenderGoods(this.shopObjArray[storeIndex].data, storeIndex, index);
        let newArray = this.shopObjArray[storeIndex].data;
        let status = newArray[0].select;
        let contrastTimes = 0;
        for (let i = 0; i < newArray.length - 1; i++) {
            if (newArray[i].select == newArray[i + 1].select) {
                contrastTimes++;
            }
            else {
                break;
            }
        }
        if (contrastTimes == newArray.length - 1) {
            if (status == true) {
                this.shopObjArray[storeIndex].select = true;
            }
            else {
                this.shopObjArray[storeIndex].select = false;
            }
            this.refs.buylist.reRenderStore(this.shopObjArray[storeIndex], storeIndex);
        }
        else {
            this.shopObjArray[storeIndex].select = false;
            this.refs.buylist.reRenderStore(this.shopObjArray[storeIndex], storeIndex);
        }
        this.judgeStoreCheck();
    }

8. 底部总全选的实现方式类似，只是在局部单选的时候，同时需要判断所有店铺是否都被动全选而改变底部状态。

changePayCheck = (status) => {//底部总全选数据处理
        this.paySelect = status;
        this.refs.pricepay.reRenderPricePay(this.paySelect);
        this.shopObjArray.map(
            (item, index) => {
                this.shopObjArray[index].select = this.paySelect;
                this.shopObjArray[index].data.map(
                    (item, index) => {
                        item.select = this.paySelect;
                    }
                );
                this.refs.buylist.reRenderStore(this.shopObjArray[index], index);
            }
        );
        this.calculatePrice();
    }

judgeStoreCheck = () => {//判断更新店铺选择状态
        let newArray = this.shopObjArray;
        let status = newArray[0].select;
        let contrastTimes = 0;
        for (let i = 0; i < newArray.length - 1; i++) {
            if (newArray[i].select == newArray[i + 1].select) {
                contrastTimes++;
            }
            else {
                break;
            }
        }
        if (contrastTimes == newArray.length - 1) {
            if (status == true) {
                this.paySelect = true;
            }
            else {
                this.paySelect = false;
            }
        }
        else {
            this.paySelect = false;
        }
        this.refs.pricepay.reRenderPricePay(this.paySelect);
        this.calculatePrice();
    }

calculatePrice = () => {//计算价格
        this.totalPrice = 0;
        this.shopObjArray.map(
            (item, index) => {
                item.data.map(
                    (innerItem, innerIndex) => {
                        if (innerItem.select == true) {
                            this.totalPrice = innerItem.data.goodsPrices * innerItem.number + this.totalPrice;
                        }
                    }
                );
            }
        );
        this.refs.pricepay.changePrice(this.totalPrice);
    }

---

简易效果：

---

项目github地址：ShoppingCartDemo