react-native-drag-sort
Drag and drop sort control for react-native
Version Iteration
Installation
yarn add react-native-drag-sort
or
npm i react-native-drag-sort --save
export { DragSortableView, AutoDragSortableView, AnySizeDragSortableView }Tip
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.
Performance（GIF）
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 |
|
AnySizeDragSortableView
| 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 |
|
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)
}}
/>
// ====== 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 =======
