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