react-native-swipe-list-view 侧滑删除组件

react-native-swipe-list-view 侧滑删除组件

1、组件描述：
react-native-swipe-list-view是基于react native的一款侧滑删除组件。详细使用方法参考地址：
（1）github 组件地址
2、组件使用：
（1）先安装react-native-swipe-list-view
$ npm install react-native-swipe-list-view --save
（2）导入react-native-swipe-list-view
import { SwipeListView, SwipeRow } from ‘react-native-swipe-list-view’;
（3）使用SwipeListView

<SwipeListView
    data={this.state.listData}//列表数据
    renderItem={data => (//列表每一条数据样式展示
        <TouchableOpacity style={styles.shopItem} activeOpacity={1} onPress={()=>{this.props.navigation.navigate('ShopIndex',{vid:data.item.vid})}}>
            <Image style={styles.shopImg} resizeMode='contain' source={{uri:data.item.store_avatar}} />
            <View style={styles.shopInfo}>
                <View style={styles.shopNameBox}>
                    <Text numberOfLines={1} style={styles.shopName}> {data.item.store_name}</Text> 
                    <View style={styles.shopLabel}> 
                        {
                            data.item.activity==1 ? 
                            <LinearGradient colors={['#FDB68E', '#FF3900',]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} locations={[0, 0.88]} style={styles.activityLabelBg}> 
                                <Text style={styles.activityLabelText}> 活动</Text> 
                            </LinearGradient>  : null
                        }
                        {
                            data.item.new==1 ? 
                            <LinearGradient colors={['#F85256', '#E3393D',]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} locations={[0, 0.88]} style={styles.activityLabelBg}> 
                                <Text style={styles.activityLabelText}> 新券</Text> 
                            </LinearGradient>  : null
                        }
                    </View> 
                </View> 
                <View style={styles.newBox}> 
                    {
                        data.item.new_total=='0' || data.item.new_total=='' ? null :
                        <View style={styles.newCon}> 
                            <Text style={styles.goodNew}> {data.item.new_total}件上新</Text> 
                            <Image style={styles.newIcon} resizeMode='contain' source={require('../assets/images/shop/newNext.png')}/> 
                        </View> 
                    }
                    <Image style={styles.shopMore} resizeMode='contain' source={require('../assets/images/shop/more.png')} /> 
                </View> 
            </View> 
        </TouchableOpacity> 
    )}
    renderHiddenItem={(data,rowMap) => (//左滑隐藏的内容
        <View style={styles.rowBack}> 
            <TouchableOpacity
                style={[
                    styles.backRightBtn,
                    styles.backRightBtnLeft,
                ]}
                onPress={()=>
                    this.deleteRow(data,rowMap)
                }
            > 
                <Text style={styles.backTextWhite}> 
            		取消关注
                </Text> 
            </TouchableOpacity> 
        </View> 
    )}
    leftOpenValue={0}//左侧侧滑的偏移量，这个值是正数
    rightOpenValue={pxToDp(-180)}//右侧侧滑的偏移量，这个值是负数
    disableRightSwipe={true}//禁止右侧滑动
    previewFirstRow={false}//第一行具有滑动预览效果
    closeOnRowPress={true}//当按下一行时，关闭打开的行
    closeOnScroll={true}//当滚动listview时，关闭打开的行
    closeOnRowBeginSwipe={false}//当行开始滑动打开时，关闭打开的行
    swipeToOpenPercent={4}//滑动百分之多少触发行打开
    previewRowKey={'0'}
    previewOpenValue={-180}//侧滑展开的宽度
    previewOpenDelay={3000}//侧滑展开的时间
    onRowDidOpen={this.onRowDidOpen}//当滑动行的动画已经开启时调用
    onSwipeValueChange={this.onSwipeValueChange}
/> 
//this.deleteRow(data,rowMap)按钮删除事件
deleteRow(data,rowMap){
	RequestData.postAppData(AppDotUrls+"/index.php?app=vendor&mod=followvendor",
	{'vid':data.item && data.item.vid})
	.then(result => {
		if(result.code =='200'){
			this.closeRow(rowMap, data.item.key);
			ViewUtils.appddToastTip(result.msg)
			this.getShopList();
		}else{
			ViewUtils.appddToastTip(result.msg)
		}
	})
	.catch(error => {
		ViewUtils.appddToastTip(error)
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

3、react-native-swipe-list-view组件属性及方法：

4、效果图：