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 }
AutomaticSlidingOnePage | AutomaticSlidingThreePage |
---|---|
ScrollFixedAddPage | DragDeletePage |
---|---|
SortAndFixedPage | OneRowsPage |
---|---|
dataSource: PropTypes.array.isRequired :
parentWidth: PropTypes.number //parent width
childrenHeight: PropTypes.number.isRequired, //Each item height
childrenWidth: PropTypes.number.isRequired,//Each item width
marginChildrenTop: PropTypes.number, //So the item’s outermost view adds margin, you can only use this method.
marginChildrenBottom: PropTypes.number,
marginChildrenLeft : PropTypes.number,
marginChildrenRight : PropTypes.number,
sortable: PropTypes.bool, //Do not allow dragging
onClickItem: PropTypes.func, //click
onDragStart: PropTypes.func,
onDragEnd : PropTypes.func,
onDataChange : PropTypes.func, //This method is called every time the data changes.
renderItem : PropTypes.func.isRequired, //render item view
fixedItems:PropTypes.array //no remove
keyExtractor: keyExtractor: PropTypes.func //(item,index) => key
delayLongPress: PropTypes.number,
isDragFreely: PropTypes.bool, // Whether to limit the drag space
onDragging: PropTypes.func
maxScale: PropTypes.number;
minOpacity: PropTypes.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)
}}
/>
Author: mochixuan
GitHub: https://github.com/mochixuan/react-native-drag-sort
#react-native #react #programming