RN 侧滑删除 react-native-swipe-list-view
发布日期:2021-10-16 12:04:54 浏览次数:1 分类:技术文章

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}   //预览第一行/>
上一篇:js 判断数据类型
下一篇:ES2020新特性

关于作者

    白红宇是个全栈工程师,前端vue,小程序,app开发到后端框架设计,数据库设计,环境部署上线运维。

最新文章