0.0.4 • Published 3 years ago
@kkyjh Fork Version
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 |
parentMarginTop | number | parent margin Top |
parentMarginBottom | number | parent margin Bottom |
parentMarginLeft | number | parent margin left |
parentMarginRight | number | parent margin right |
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 |
renderSubItem | func | render sub 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)
}}
/>