react-native-drag-sort

react-native-drag-sort

Drag and drop sort control for react-native

Version Iteration

• English Version Iteration
• 中文版本迭代

Installation

yarn add react-native-drag-sort
or
npm i react-native-drag-sort --save 

export { DragSortableView, AutoDragSortableView }

Performance（GIF）

AutomaticSlidingOnePage	AutomaticSlidingThreePage

ScrollFixedAddPage	DragDeletePage

SortAndFixedPage	OneRowsPage

API

AutoDragSortableView、DragSortableView

• dataSource: PropTypes.array.isRequired :

• parentWidth: PropTypes.number //parent width

• childrenHeight: PropTypes.number.isRequired, //Each item height

• childrenWidth: PropTypes.number.isRequired,//Each item width

• marginChildrenTop: PropTypes.number, //So the item's outermost view adds margin, you can only use this method.

• marginChildrenBottom: PropTypes.number,

• marginChildrenLeft : PropTypes.number,

• marginChildrenRight : PropTypes.number,

• sortable: PropTypes.bool, //Do not allow dragging

• onClickItem: PropTypes.func, //click

• onDragStart: PropTypes.func,

• onDragEnd : PropTypes.func,

• onDataChange : PropTypes.func, //This method is called every time the data changes.

• renderItem : PropTypes.func.isRequired, //render item view

• fixedItems:PropTypes.array //no remove

• keyExtractor: keyExtractor: PropTypes.func //(item,index) => key

• delayLongPress: PropTypes.number,

• isDragFreely: PropTypes.bool, // Whether to limit the drag space

• onDragging: PropTypes.func

• maxScale: PropTypes.number;

• minOpacity: PropTypes.number;

The following attributes belong only to AutoDragSortableView

• scaleDuration: PropTypes.number;
• slideDuration: PropTypes.number;
• autoThrottle: PropTypes.number;
• autoThrottleDuration: PropTypes.number;
• renderHeaderView: PropTypes.element,
• headerViewHeight: PropTypes.number,
• scrollIndicatorInsets: PropTypes.shape({ top: PropTypes.number, left: PropTypes.number, bottom: PropTypes.number, right: PropTypes.number }),
• renderBottomView: PropTypes.element,
• bottomViewHeight: PropTypes.number,

Example

<DragSortableView
    dataSource={this.state.data}
    parentWidth={parentWidth}
    childrenWidth= {childrenWidth}
    childrenHeight={childrenHeight}
    keyExtractor={(item,index)=> item.id}
    renderItem={(item,index)=>{
        return this.renderItem(item,index)
    }}
/>
    
<AutoDragSortableView
    dataSource={this.state.data}
    parentWidth={parentWidth}
    childrenWidth= {childrenWidth}
    childrenHeight={childrenHeight}
    keyExtractor={(item,index)=> item.id}
    renderItem={(item,index)=>{
        return this.renderItem(item,index)
    }}
/>