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