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)
})
}
3、react-native-swipe-list-view组件属性及方法:
4、效果图: