react-native-drag-sort
Version:
Drag and drop sort control for react-native
181 lines (148 loc) • 6.92 kB
Markdown
# react-native-drag-sort
Drag and drop sort control for react-native
[](https://npmjs.com/package/react-native-drag-sort)
### Version Iteration
- [English Version Iteration](https://github.com/mochixuan/react-native-drag-sort/blob/master/README_History.md)
- [中文版本迭代](https://github.com/mochixuan/react-native-drag-sort/blob/master/README_ZH_History.md)
### Installation
```bash
yarn add react-native-drag-sort
or
npm i react-native-drag-sort --save
export { DragSortableView, AutoDragSortableView, AnySizeDragSortableView }
```
### Tip
> 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.
### Performance（GIF）
[AnyThreePage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/AnyThreePage.js) | [AnyThreePage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/AnyThreePage.js)
| ------ | ----------- |
 | 
[AutomaticSlidingOnePage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/AutomaticSlidingOnePage.js) | [AutomaticSlidingThreePage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/AutomaticSlidingThreePage.js)
| ------ | ----------- |
|  | 
[ScrollFixedAddPage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/ScrollFixedAddPage.js) | [DragDeletePage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/DragDeletePage.js)
| ------ | ----------- |
|  | 
[SortAndFixedPage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/SortAndFixedPage.js) | [OneRowsPage](https://github.com/mochixuan/react-native-drag-sort/blob/master/Example/app/container/OneRowsPage.js)
| ------ | ----------- |
|  | 
### 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
|**onScrollListener** | (event: NativeSyntheticEvent<NativeScrollEvent>) => void
|**onScrollRef** | (ref: any) => void
##### AnySizeDragSortableView
|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<NativeScrollEvent>) => void
|**onScrollRef** | (ref: any) => void
|**areaOverlapRatio**|number| Must be greater than 0.5
|**movedWrapStyle**| StyleProp<ViewStyle> |style
|**childMarginTop**|number
|**childMarginBottom**|number
|**childMarginLeft**|number
|**childMarginRight**|number
### Example
```jsx
<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 =======
```