react-native-swipe-list-view 侧滑删除组件
包含两个子组件:SwipeListView 和 SwipeRow
一、SwipeListView —-是基于listview封装的具有侧滑打开、关闭功能的listview组件。目前也支持FlatList和SectionList。
import {SwipeListView} from ‘react-native-swipe-list-view’;
@属性
<SwipeListView
useFlatList //列表以FlatList形式渲染 (useSectionList)
data={this.state.data} //数据源
renderItem={this._renderData.bind(this)} //渲染列表,info:item|index|separators
closeOnRowPress={true} //当按下一行,关闭打开的行
closeOnScroll={true} //列表滚动时关闭打开的行
leftOpenValue={75} //列表项左滑translateX的值:正值
rightOpenValue={-75} //列表项右滑translateX的值:负值
stopLeftSwipe={100} //列表项左滑translateX最大的值:正值
stopRightSwipe={-100} //列表项右滑translateX最大的值:负值
disableRightSwipe={true} //禁止右滑
ItemSeparatorComponent={() => <View style={{height: 0}}/>}
renderHiddenItem={(rowData) => ( //渲染隐藏的行
<TouchableOpacity}
onPress={this.deleItem.bind(this, rowData)}
>
<Text style={{fontSize: yfont(15), color: '#fff'}}>删除</Text>
</TouchableOpacity>
)}
onRowOpen={(rowKey, rowMap) => { //当滑动行的动画处于开启状态时调用
if(rowMap[1] !== undefined){
setTimeout(() => {
rowMap[rowKey].closeRow()
}, 2000)
}
}}
ListEmptyComponent={this.emptyView.bind(this)} //FlatList的属性
keyExtractor={this._keyExtractor.bind(this)} //FlatList的属性
previewRowKey={this.state.data[0].key} //预览第一行
/>