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.
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
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 =======