Drag and drop sort control for react-native
Add a new scene based on user needs.
- Add attribute (isDragFreely): Whether to limit the drag space.
- Add property callback function (onDragging)
- Add demo Demo: DragDeletePage
The 1.x version ends, the optimizations are optimized, and the problems that have occurred have been resolved. The 2.x version will be written next, and it is expected to add an auto-compatible ScrollView slide, slide delete function, and so on.
- Fix a small problem.
- Add a familiar keyExtractor:(item,index) => key to achieve performance optimization, similar to FlatList's keyExtractor, will not flash (repaint) when deleting Item.
- Add the delayLongPress property: press to the time of the trigger, customize how long to start
Added the top fixed function, you can set the start of several consecutive non-dragable functions, similar to today's headlines, this function is the same as today's headline drag and drop, you can compare
Add a single-line drag-and-drop demo. In fact, this function is consistent. This drag-and-drop plug-in is inherently adaptive. It will take time to optimize the ScrollView problem and make the control bring the ScrollView function。
Optimize drag and drop automatically when not moving, now this plugin should have no problems. Add a real-world demo example, and there will be time to animate this example. When deleting, the item goes down to the item animation to be selected, and the item to be selected is selected. And automatically slide down the animation when sliding。
yarn add react-native-drag-sort
or
npm i react-native-drag-sort --save <DragSortableView
dataSource={this.state.data}
parentWidth={parentWidth}
childrenWidth= {childrenWidth}
childrenHeight={childrenHeight}
marginChildrenTop={marginChildrenTop}
onDataChange = {(data)=>{
// delete or add data to refresh
if (data.length != this.state.data.length) {
this.setState({
data: data
})
}
}}
keyExtractor={(item,index)=> item.id}
onClickItem={(data,item,index)=>{}}
renderItem={(item,index)=>{
return this.renderItem(item,index)
}}/>
-
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;
-
scaleDuration: PropTypes.number;
-
slideDuration: PropTypes.number;