• 售前

  • 售后

热门帖子
入门百科

react-native 实现购物车滑动删除结果的示例代码

[复制链接]
屎壳郎秧 显示全部楼层 发表于 2021-10-25 19:40:57 |阅读模式 打印 上一主题 下一主题
购物车的功能根本上电商项目都会有的,这是一篇关于react-native的,原生android的已经很久没写了。记得从前写原生购物车的时候,碰到过产物的魂魄诘责,为啥iOS的滑动删除可以,android却那么难实现的。这个时候,我就打开微信说,android的微信版也是长按举行操纵,iOS的是滑动操纵的,两个平台自带的体系交互操纵是不一样的。固然,末了照旧默默的找各种三方库去举行滑动删除。

rn的项目也是找的网上的一个三方库举行列表滑动操纵的,github地点react-native-swipe-list-view

最根本的使用方法和flatList差不多,data 属性数组数据源,renderItem 从data中挨个取出数据并渲染到列表中
  1. <SwipeListView
  2.   data={this.state.listViewData}
  3.   renderItem={this.renderItem}
  4.   keyExtractor={this.keyExtractor}
  5. />
复制代码
这时候是不可以左右滑动的,就跟平凡的flatList效果一样。加上renderHiddenItem属性,可以左右滑动。renderHiddenItem渲染的就是隐藏的内容,隐藏的内容位置是通过flex结构来控制,下面这个例子使用横向结构,通过space-between将内容控制在左右两边,形成了左右滑动时出现隐藏内容。
  1. //这是左右都可以滑动的
  2. renderHiddenItem = (data, rowMap) => {
  3.   return <View style={{
  4.     flex: 1,
  5.     flexDirection: 'row',
  6.     justifyContent: 'space-between'
  7.   }}>
  8.     <Text>Left</Text>
  9.     <Text>Right</Text>
  10.   </View>
  11. }
复制代码
我们这边只必要可以左滑,通过justifyContent: 'flex-end'属性将删除按钮内容置于最右边,同时设置SwipeListView的属性disableRightSwipe来禁止右滑操纵。
  1. renderHiddenItem = (data, rowMap) => {
  2.   return <View style={{
  3.     flex: 1,
  4.     flexDirection: 'row',
  5.     justifyContent: 'flex-end',
  6.   }}>
  7.     <TouchableOpacity style={{
  8.       backgroundColor: '#FF496C',
  9.       width: 80,
  10.       justifyContent: 'center',
  11.       alignItems: 'center'
  12.     }}>
  13.       <Text style={{color:'#fff'}}>删除</Text>
  14.     </TouchableOpacity>
  15.   </View>
  16. }
复制代码
这个时候向左滑,可以看到右边的删除按钮出来了,但是没有一直处于打开状态,还必要添加rightOpenValue={-80}属性,使其处于打开状态。
  1. <SwipeListView
  2.   disableRightSwipe
  3.   data={this.state.listViewData}
  4.   renderItem={this.renderItem}
  5.   keyExtractor={this.keyExtractor}
  6.   renderHiddenItem={this.renderHiddenItem}
  7.   rightOpenValue={-80}
  8. />
复制代码
另外有一个必要注意的是,renderItem举行列表渲染时,最外层的视图,官方保举使用可点击相应触摸的,而不是<View/>,正常情况是,打开了一个视图,点其他视图,默认会关闭打开的那一项,如果最外层是<View/>则不会有这种效果。
  1. //最外层是 TouchableHighlight
  2. renderItem = ({item, index}, rowMap) => {
  3.   return <TouchableHighlight
  4.     onPress={() => {
  5.     }}
  6.     underlayColor={'#fff'}>
  7.     ...
  8.   </TouchableHighlight>
  9. }
复制代码
至此,滑动删除的效果已经根本满意了,后续就是业务逻辑,增删操纵数据源革新页面了。


到此这篇关于react-native 实现购物车滑动删除效果的示例代码的文章就先容到这了,更多相干react-native 滑动删除内容请搜索草根技术分享从前的文章或继承欣赏下面的相干文章盼望各人以后多多支持草根技术分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作