Drag and drop sort control for react-native
yarn add react-native-drag-sort
or
npm i react-native-drag-sort --save
export { DragSortableView, AutoDragSortableView, AnySizeDragSortableView }Use priority: DragSortableView > AutoDragSortableView > AnySizeDragSortableView
- 1、If the width and height are fixed and there is no need to slide, use DragSortableView.
- 2、If the width and height are fixed and you need to slide, use AutoDragSortableView.
- 3、If the width and height are arbitrary and need to slide, please use AnySizeDragSortableView.
| AnyThreePage | AnyThreePage |
|---|---|
| Anysize | Anysize |
| AutomaticSlidingOnePage | AutomaticSlidingThreePage |
|---|---|
| ScrollFixedAddPage | DragDeletePage |
|---|---|
| dragdelete.gif |
| SortAndFixedPage | OneRowsPage |
|---|---|
| ezgif.com-resize.gif | one-line.gif |
isRequired if there is a * in the name field
| name | Proptypes | Description |
|---|---|---|
| dataSource * | array | |
| parentWidth | number | parent width |
| childrenHeight * | number | Each item height |
| childrenWidth * | number | Each item width |
| marginChildrenTop | number | So the item's outermost view adds margin, you can only use this method. |
| marginChildrenBottom | number | |
| marginChildrenLeft | number | |
| marginChildrenRight | number | |
| sortable | bool | Do not allow dragging |
| onClickItem | func | click |
| onDragStart | func | |
| onDragEnd | func | |
| onDataChange | func | This method is called every time the data changes. |
| renderItem * | func | render item view |
| fixedItems | array | no remove |
| keyExtractor | func | (item,index) => key |
| delayLongPress | number | |
| isDragFreely | bool | Whether to limit the drag space |
| onDragging | func | |
| maxScale | number | |
| minOpacity | number |
| name | Proptypes | Description |
|---|---|---|
| scaleDuration | number | |
| slideDuration | number | |
| autoThrottle | number | |
| autoThrottleDuration | number | |
| renderHeaderView | element | |
| headerViewHeight | number | |
| scrollIndicatorInsets | ({top:number, left:number, bottom:number, right:number}) | |
| renderBottomView | element | |
| bottomViewHeight | number | |
| onScrollListener | (event: NativeSyntheticEvent) => void | |
| onScrollRef | (ref: any) => void |
| name | Proptypes | Description |
|---|---|---|
| dataSource * | array | |
| keyExtractor | func.isRequired | (item,index) => key |
| renderItem * | func | render item view |
| onDataChange | func | This method is called every time the data changes. |
| renderHeaderView | element | |
| headerViewHeight | number | |
| renderBottomView | element | |
| bottomViewHeight | number | |
| autoThrottle | number | |
| autoThrottleDuration | number | |
| onDragEnd | func | |
| scrollIndicatorInsets | ({top:number, left:number, bottom:number, right:number}) | |
| onScrollListener | (event: NativeSyntheticEvent) => void | |
| onScrollRef | (ref: any) => void | |
| areaOverlapRatio | number | Must be greater than 0.5 |
| movedWrapStyle | StyleProp | style |
| childMarginTop | number | |
| childMarginBottom | number | |
| childMarginLeft | number | |
| childMarginRight | number |
<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) }} /> // ====== AnySizeDragSortableView start ======= constructor(props) { super(props); this.sortableViewRef = createRef() } <AnySizeDragSortableView ref={this.sortableViewRef} dataSource={items} keyExtractor={(item) => item.text} // 1、isRequired renderItem={this._renderItem} onDataChange={(data, callback)=> { this.setState({items: data},()=>{ callback() // isRequired }) }} /> _renderItem = (item, index, isMoved) => { return ( <TouchableOpacity onLongPress={() => { this.sortableViewRef.current.startTouch(item, index) // 2、isRequired }} onPressOut = {() => { this.sortableViewRef.current.onPressOut() 3、isRequired }} > <...> </TouchableOpacity> ) } // ====== AnySizeDragSortableView end =======