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

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

The following attributes belong only to AutoDragSortableView

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

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)
    }}
/>