React Native封装购物车组件

作者: 光强_上海 | 来源:发表于2017-11-03 14:36 被阅读792次

前言

在前段时间开源了个人RN项目OneM,项目性质是属于杂志类的,没有涉及到电商购物类的功能,后面再技术群里发现有同学们问了类似于京东淘宝这类的购物车使用RN该怎么实现,想着购物车逻辑也确实挺复杂的,对于RN开发的新手来说确实有一定的难度。所以作者就打算写一个购物车的Demo,这样不清楚怎样实现购物车逻辑的同学们就可以参考作者的项目了。

预览效果图

x4jbmiIOe5.gif

来聊聊这个购物车包含哪些逻辑

  • 支持选择单个商品
  • 支持选择该店铺的的所有商品
  • 支持购物车商品全选
  • 支持购物车每一个商品数量的增加和减少
  • 支持控制每一个商品支持购买的最小购买数量和最大购买数量
  • 支持实时计算选中商品的总金额和总数量

查看完整的示例Demo戳这里

https://github.com/guangqiang-liu/react-native-shoppingCartDemo

总结

虽然购物车的逻辑确实有点多,需要处理的事件也多,但是只要同学们控制好每一个事件对应的状态,管理好整个状态机和刷新机制,应该也能写好一个完美的购物车功能。同学们要是觉得项目对你有帮助请给个 star 给个 关注 谢谢。

福利时间

  • 作者React Native开源项目OneM地址(按照企业开发标准搭建框架设计开发):https://github.com/guangqiang-liu/OneM (欢迎小伙伴们 star)
  • 作者简书主页:包含50多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 (欢迎小伙伴们:多多关注多多点赞)
  • 作者React Native QQ技术交流群:620792950 欢迎小伙伴进群交流学习
  • 友情提示:在开发中有遇到RN相关的技术问题,欢迎小伙伴加入交流群(620792950),在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家,谢谢支持!

相关文章

网友评论

  • 代码界的扫地僧:作者你好 看了你的购物车组件 发现一个问题 SectionList的renderItem属性根本就没有section 这个东西 您的数据是怎么解析的呢 我这一直报错
    代码界的扫地僧:@光强_上海 renderItem: (info: {item: Item, index: number}) => ?React.Element renderItem返回Section中的每个小的的Item。可以通过函数返回Element,函数有一个info参数,参数为JSON形式,参数形式为:{item: Item, index: number}。
    代码界的扫地僧:@光强_上海 按照了 一模一样的 我去看了这个的用法 renderItem 应该不能反回section吧 http://blog.csdn.net/qq_38453189/article/details/72810741
    光强_上海:@代码界的扫地僧 这个section是SectionList组件中包含的啊,你可以看看SectionList的使用方式,还有,你的报错,是不是你没有按照我的写法去写尼,
    this.renderItem = this.renderItem.bind(this)
    this.renderSectionHeader = this.renderSectionHeader.bind(this)

    <SectionList
    renderSectionHeader={this.renderSectionHeader}
    renderItem={this.renderItem}
    sections={tempArr}
    ItemSeparatorComponent={() => <View/>}
    ListHeaderComponent={() => <View/>}
    ListFooterComponent={() => <View/>}
    />

本文标题:React Native封装购物车组件

本文链接:https://www.haomeiwen.com/subject/qjetmxtx.html