0.0.4 • Published 4 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)
}}
/>
