From f2083de2417cf4e57a38ad821137aef667cd6e6d Mon Sep 17 00:00:00 2001 From: qianyu Date: Sun, 4 Feb 2024 15:31:46 +0800 Subject: [PATCH 1/4] =?UTF-8?q?[Issues:=20#I90ZMG]=20=E6=9B=B4=E6=96=B0rea?= =?UTF-8?q?ct-native-drag-sort=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-drag-sort.md | 465 +++++++++++++++++++++++++++++---- 1 file changed, 412 insertions(+), 53 deletions(-) diff --git a/1224/react-native-drag-sort.md b/1224/react-native-drag-sort.md index 21e2593a..e04c8a5b 100644 --- a/1224/react-native-drag-sort.md +++ b/1224/react-native-drag-sort.md @@ -1,4 +1,4 @@ -> 模板版本：v0.1.3 +> 模板版本：v0.1.2

react-native-drag-sort

@@ -13,35 +13,36 @@

+ + > [!tip] [Github 地址](https://github.com/mochixuan/react-native-drag-sort) ## 安装与使用 进入到工程目录并输入以下命令： - - -#### **npm** +#### **yarn** ```bash -npm i react-native-drag-sort@2.4.4 +yarn add react-native-drag-sort@2.4.4 ``` -#### **yarn** +#### **npm** ```bash -yarn add react-native-drag-sort@2.4.4 -``` +npm i react-native-drag-sort@2.4.4 - +export { DragSortableView, AutoDragSortableView, AnySizeDragSortableView } +``` 下面的代码展示了这个库的基本使用场景： ```js +//方法1 import React, { useState } from "react"; -import { View, Text, StyleSheet, SafeAreaView } from "react-native"; -import { DragSortableView } from "react-native-drag-sort"; - +import { View, Text, StyleSheet, SafeAreaView } from 'react-native'; +import { DragSortableView } from 'react-native-drag-sort'; +//此案例id1、id2不支持拖拽 const Dragsort = () => { const [data, setData] = useState([ { @@ -81,7 +82,7 @@ const Dragsort = () => { return ( - DragSortableView + DragSortableView { onClickItem={(data, item, index) => { console.log("点击了第", index, "个元素"); }} - onDragStart={() => console.log("Drag started")} - onDragEnd={() => console.log("Drag end")} + onDragStart={() => console.log('Drag started')} + onDragEnd={() => console.log('Drag end')} onDataChange={() => { console.log("数据发生变化"); }} @@ -109,12 +110,16 @@ const Dragsort = () => { minOpacity={0.7} renderItem={(item, index) => { return ( - + {item.title} ); }} sortable={true} + /> ); @@ -128,44 +133,398 @@ const styles = StyleSheet.create({ alignContent: "center", borderRadius: 5, margin: 20, - backgroundColor: "#4e71f2", + backgroundColor: '#4e71f2', height: 50, width: 100, }, text: { fontSize: 18, - color: "#fff", - textAlign: "center", + color: '#fff', + textAlign: 'center' }, header: { height: 48, - justifyContent: "center", - alignItems: "center", - borderBottomColor: "#2ecc71", + justifyContent: 'center', + alignItems: 'center', + borderBottomColor: '#2ecc71', borderBottomWidth: 2, }, header_title: { - color: "#333", + color: '#333', fontSize: 24, - fontWeight: "bold", + fontWeight: 'bold', + } +}) +export default Dragsort; + + +//方法2 +//此案例Item1、Item2不支持拖拽 +import React, { useState } from "react"; +import { View, Text } from 'react-native'; +import { AutoDragSortableView } from "react-native-drag-sort"; + +const AutoDragSortDemo = () => { + const [data, setData] = useState([ + { id: '1', text: 'Item 1' }, + { id: '2', text: 'Item 2' }, + { id: '3', text: 'Item 3' }, + { id: '4', text: 'Item 4' }, + { id: '5', text: 'Item 5' }, + { id: '6', text: 'Item 6' }, + { id: '7', text: 'Item 7' }, + { id: '8', text: 'Item 8' }, + { id: '9', text: 'Item 9' }, + { id: '10', text: 'Item 10' }, + { id: '11', text: 'Item 11' }, + { id: '12', text: 'Item 12' }, + { id: '13', text: 'Item 13' }, + { id: '14', text: 'Item 14' }, + { id: '15', text: 'Item 15' }, + { id: '16', text: 'Item 16' }, + { id: '17', text: 'Item 17' }, + { id: '18', text: 'Item 18' }, + { id: '19', text: 'Item 19' }, + { id: '20', text: 'Item 20' }, + { id: '21', text: 'Item 21' }, + { id: '22', text: 'Item 22' }, + { id: '23', text: 'Item 23' }, + { id: '24', text: 'Item 24' }, + { id: '25', text: 'Item 25' }, + { id: '26', text: 'Item 26' }, + { id: '27', text: 'Item 27' }, + { id: '28', text: 'Item 28' }, + ]); + const renderHeaderView=( + + 标题 + + ) + const renderBottomView=( + + 底部 + + ) + + return ( + { + console.log("数据发生变化"); + }} + keyExtractor={(item, index) => item.id} + onClickItem={(data, item, index) => { + console.log("点击了第", index, "个元素"); + }} + renderItem={(item, index) => { + return ( + + {item.text} + + ); + }} + scaleDuration={500} //拖拽项缩放效果的持续时间 + slideDuration={200} //拖拽项滑动效果的持续时间 + autoThrottle={100} //自动滑动到目的地的间隔时间 + autoThrottleDuration={500} //自动滑动到目的地的持续时间 + sortable={true} + isDragFreely={false} + fixedItems={[0, 1]} + delayLongPress={100} + onDragStart={() => console.log('Drag started')} + onDragEnd={() => console.log('Drag end')} + renderHeaderView={renderHeaderView} + headerViewHeight={50} + scrollIndicatorInsets={{ top: 0, left: 0, bottom: 0, right: 0 }} + renderBottomView={renderBottomView} + bottomViewHeight={50} + onScrollListener={(event) => { + console.log("滚动事件", event); + }} + onScrollRef={(ref) => { + console.log("滚动容器", ref); + }} + /> + ); +}; + +export default AutoDragSortDemo; + +//方法3 +import React,{createRef} from 'react'; +import { + Text, + TouchableOpacity, + StyleSheet, + View, + Image, + Dimensions, + SafeAreaView +} from 'react-native'; +import { AnySizeDragSortableView } from 'react-native-drag-sort' + +const {width} = Dimensions.get('window') +const headerViewHeight = 160 +const bottomViewHeight = 40 + +const getW = (index, isWidth) => isWidth ? index % 3 === 0 ? (width - 40) : (width - 60) / 2 : 80; + +export default class AnySizeDragSortDemo extends React.Component { + constructor(props) { + super(props); + const items = [] + for (let i = 0; i < 26; i++) { + items.push({ + text: String.fromCharCode(65 + i), + width: getW(i, true), + height: getW(i, false) + }) + } + this.state = { + items, + movedKey: null + }; + + this.sortableViewRef = createRef() + } + + onDeleteItem = (item, index) => { + const items = [...this.state.items] + items.splice(index, 1) + this.setState({ items }) + } + + _renderItem = (item, index, isMoved) => { + const {movedKey} = this.state + return ( + { + this.setState({movedKey: item.text}) + this.sortableViewRef.current.startTouch(item, index) + }} + onPressOut = {() => this.sortableViewRef.current.onPressOut()} + > + + { + + this.onDeleteItem(item, index)}> + + + + } + + { + isMoved ? ( + + + + ) : null + } + + {item.text} + + + + + ) + } + + render() { + const { items } = this.state; + const renderHeaderView = ( + + + + mochixuan + Android, React-Native, Flutter, React, Web。Learn new knowledge and share new knowledge. + + + ) + const renderBottomView = ( + + yarn add react-native-drag-sort + + ) + return ( + <> + + AnySize + + item.text} + renderItem={this._renderItem} + onDataChange={(data, callback)=> { + this.setState({items: data},()=>{ + callback() + console.log('移动了') + }) + }} + renderHeaderView = {renderHeaderView} + headerViewHeight={headerViewHeight} + renderBottomView = {renderBottomView} + bottomViewHeight={bottomViewHeight} + movedWrapStyle={styles.item_moved} + onDragEnd={()=> console.log('Drag end')} + scrollIndicatorInsets={{ top: 1, left: 1, bottom: 1, right: 1 }} + autoThrottle={100} + autoThrottleDuration={500} + areaOverlapRatio={0.5} + childMarginTop={10} + childMarginBottom={10} + childMarginLeft={10} + childMarginRight={10} + /> + + ); + } +} + +const styles = StyleSheet.create({ + item_wrap: { + position: 'relative', + paddingLeft: 20, + paddingTop: 20 + }, + item: { + justifyContent: 'space-around', + alignItems: 'center', + backgroundColor: '#f39c12', + borderRadius: 4, + }, + item_clear_wrap: { + position: 'absolute', + left: 10, + top: 10, + width: 20, + height: 20, + zIndex: 999 + }, + item_clear: { + width: 20, + height: 20 }, + item_moved: { + opacity: 0.95, + borderRadius: 4, + }, + item_icon_swipe: { + width: 50, + height: 50, + backgroundColor: '#fff', + borderRadius: 50 * 0.5, + justifyContent: 'center', + alignItems: 'center', + }, + item_icon: { + width: 30, + height: 30, + resizeMode: 'contain', + }, + item_text_swipe: { + backgroundColor: '#fff', + width: 56, + height: 30, + borderRadius: 15, + justifyContent: 'center', + alignItems: 'center', + }, + item_text: { + color: '#444', + fontSize: 20, + fontWeight: 'bold', + }, + header: { + height: 48, + justifyContent: 'center', + alignItems: 'center', + borderBottomColor: '#2ecc71', + borderBottomWidth: 2, +}, +header_title: { + color: '#333', + fontSize: 24, + fontWeight: 'bold' +}, + aheader: { + height: headerViewHeight, + flexDirection: 'row', + borderBottomColor: '#2ecc71', + borderBottomWidth: 2, + zIndex: 100, + backgroundColor: '#fff' +}, +aheader_img: { + width: headerViewHeight * 0.6, + height: headerViewHeight * 0.6, + resizeMode: 'cover', + borderRadius: headerViewHeight * 0.3, + marginLeft: 16, + marginTop: 10, +}, +aheader_context: { + marginLeft: 8, + height: headerViewHeight * 0.4, + marginTop: 10 +}, +aheader_title: { + color: '#333', + fontSize: 20, + marginBottom: 10, + fontWeight: 'bold' +}, +aheader_desc: { + color: '#444', + fontSize: 16, + width: width - headerViewHeight * 0.6 - 32 +}, +abottom: { + justifyContent: 'center', + alignItems: 'center', + height: bottomViewHeight, + backgroundColor: '#fff', + zIndex: 100, + borderTopColor: '#2ecc71', + borderTopWidth: 2, +}, +abottom_desc: { + color: '#333', + fontSize: 20, + fontWeight: 'bold' +} }); -export default Dragsort; ``` ## 约束与限制 ### 兼容性 -本文档内容基于以下版本验证通过： +在下述版本验证通过： -1. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.58; +1. IDE：DevEco Studio 4.1.3.500; SDK：OpenHarmony(api11) 4.1.5.6; 测试设备：Mate60 (BRA-AL00);ROM：HarmonyOS NEXT Developer Preview1(2.0.0.59); RNOH：0.72.13 ### 权限要求 ## API（AutoDragSortableView、DragSortableView） -**isRequired if there is a \* in the name field** +**isRequired if there is a * in the name field** > [!tip] "Platform"列表示该属性在原三方库上支持的平台。 @@ -173,29 +532,29 @@ export default Dragsort; > > 详情见 [react-native-drag-sort 源库地址](https://github.com/mochixuan/react-native-drag-sort) -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :----------------------: | :---------------------------------------------------------------------: | :------: | :------: | :---------: | :---------------: | -| **dataSource** \* | | array | Yes | iOS/Android | Yes | -| **parentWidth** | parent width | number | No | iOS/Android | Yes | -| **childrenHeight** \* | Each item height | number | Yes | iOS/Android | Yes | -| **childrenWidth** \* | Each item width | number | Yes | iOS/Android | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :----------------------: | :----------------------------------------------------------: | :------: | :------: | :---------: | :---------------: | +| **dataSource** * | | array | Yes | iOS/Android | Yes | +| **parentWidth** | parent width | number | No | iOS/Android | Yes | +| **childrenHeight** * | Each item height | number | Yes | iOS/Android | Yes | +| **childrenWidth** * | Each item width | number | Yes | iOS/Android | Yes | | **marginChildrenTop** | So the item's outermost view adds margin, you can only use this method. | number | No | iOS/Android | Yes | -| **marginChildrenBottom** | | number | No | iOS/Android | Yes | -| **marginChildrenLeft** | | number | No | iOS/Android | Yes | -| **marginChildrenRight** | | number | No | iOS/Android | Yes | -| **sortable** | Do not allow dragging | bool | No | iOS/Android | Yes | -| **onClickItem** | click | function | No | iOS/Android | Yes | -| **onDragStart** | | function | No | iOS/Android | Yes | -| **onDragEnd** | | function | No | iOS/Android | Yes | -| **onDataChange** | This method is called every time the data changes. | function | No | iOS/Android | Yes | -| **renderItem** \* | render item view | function | Yes | iOS/Android | Yes | -| **fixedItems** | no remove | array | No | iOS/Android | Yes | -| **keyExtractor** | (item,index) => key | function | No | iOS/Android | Yes | -| **delayLongPress** | | number | No | iOS/Android | Yes | -| **isDragFreely** | Whether to limit the drag space | bool | No | iOS/Android | Yes | -| **onDragging** | | function | No | iOS/Android | Yes | -| **maxScale** | | number | No | iOS/Android | Yes | -| **minOpacity** | | number | No | iOS/Android | Yes | +| **marginChildrenBottom** | | number | No | iOS/Android | Yes | +| **marginChildrenLeft** | | number | No | iOS/Android | Yes | +| **marginChildrenRight** | | number | No | iOS/Android | Yes | +| **sortable** | Do not allow dragging | bool | No | iOS/Android | Yes | +| **onClickItem** | click | function | No | iOS/Android | Yes | +| **onDragStart** | | function | No | iOS/Android | Yes | +| **onDragEnd** | | function | No | iOS/Android | Yes | +| **onDataChange** | This method is called every time the data changes. | function | No | iOS/Android | Yes | +| **renderItem** * | render item view | function | Yes | iOS/Android | Yes | +| **fixedItems** | no remove | array | No | iOS/Android | Yes | +| **keyExtractor** | (item,index) => key | function | No | iOS/Android | Yes | +| **delayLongPress** | | number | No | iOS/Android | Yes | +| **isDragFreely** | Whether to limit the drag space | bool | No | iOS/Android | Yes | +| **onDragging** | | function | No | iOS/Android | Yes | +| **maxScale** | | number | No | iOS/Android | Yes | +| **minOpacity** | | number | No | iOS/Android | Yes | #### The following attributes belong only to AutoDragSortableView @@ -217,7 +576,7 @@ export default Dragsort; | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----------------------: | :-----------------------------------------------: | :------------------------------------------------------: | :------: | :---------: | :---------------: | -| **renderItem** \* | render item view | function | Yes | iOS/Android | Yes | +| **renderItem** * | render item view | function | Yes | iOS/Android | Yes | | **onDataChange** | This method is called every time the data changes | function | No | iOS/Android | Yes | | **renderHeaderView** | | element | No | iOS/Android | Yes | | **headerViewHeight** | | number | No | iOS/Android | Yes | @@ -235,7 +594,7 @@ export default Dragsort; | **childMarginRight** | | number | No | iOS/Android | Yes | | **autoThrottleDuration** | | number | No | iOS/Android | Yes | | **onDragEnd** | | function | No | iOS/Android | Yes | -| **dataSource** \* | | array | Yes | iOS/Android | Yes | +| **dataSource** * | | array | Yes | iOS/Android | Yes | | **keyExtractor** | (item,index) => key | function.isRequired | No | iOS/Android | Yes | ## 遗留问题 @@ -244,4 +603,4 @@ export default Dragsort; ## 开源协议 -本项目基于 [The Apache License (Apache)](https://github.com/mochixuan/react-native-drag-sort/blob/master/LICENSE) ，请自由地享受和参与开源。 +本项目基于 [The Apache License (Apache)](https://github.com/mochixuan/react-native-drag-sort/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file -- Gitee From 499ca7011c3730d303a614e3df47f89b33b66034 Mon Sep 17 00:00:00 2001 From: qianyu Date: Tue, 6 Feb 2024 10:05:23 +0800 Subject: [PATCH 2/4] =?UTF-8?q?[Issues:=20#I90ZMG]=20=E6=9B=B4=E6=96=B0rea?= =?UTF-8?q?ct-native-drag-sort=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-drag-sort.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/1224/react-native-drag-sort.md b/1224/react-native-drag-sort.md index e04c8a5b..9149b915 100644 --- a/1224/react-native-drag-sort.md +++ b/1224/react-native-drag-sort.md @@ -1,20 +1,21 @@ -> 模板版本：v0.1.2 +> 模板版本：v0.1.3

react-native-drag-sort

- Supported platforms + Supported platforms - - License + + License

+ > [!tip] [Github 地址](https://github.com/mochixuan/react-native-drag-sort) ## 安装与使用 @@ -518,7 +519,7 @@ abottom_desc: { 在下述版本验证通过： -1. IDE：DevEco Studio 4.1.3.500; SDK：OpenHarmony(api11) 4.1.5.6; 测试设备：Mate60 (BRA-AL00);ROM：HarmonyOS NEXT Developer Preview1(2.0.0.59); RNOH：0.72.13 +1. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1(2.0.0.59); IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.58; ### 权限要求 -- Gitee From 7b83ed1fee923f2688f8e3966e4156d761094d0f Mon Sep 17 00:00:00 2001 From: qianyu Date: Tue, 6 Feb 2024 11:13:49 +0800 Subject: [PATCH 3/4] =?UTF-8?q?[Issues:=20#I90ZMG]=20=E6=9B=B4=E6=96=B0rea?= =?UTF-8?q?ct-native-drag-sort=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-drag-sort.md | 26 +++++++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/1224/react-native-drag-sort.md b/1224/react-native-drag-sort.md index 9149b915..24ee1299 100644 --- a/1224/react-native-drag-sort.md +++ b/1224/react-native-drag-sort.md @@ -32,14 +32,27 @@ yarn add react-native-drag-sort@2.4.4 ```bash npm i react-native-drag-sort@2.4.4 +``` + +#### 导出模块 +```js 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. + 下面的代码展示了这个库的基本使用场景： +##### DragSortableView组件使用 + ```js -//方法1 import React, { useState } from "react"; import { View, Text, StyleSheet, SafeAreaView } from 'react-native'; import { DragSortableView } from 'react-native-drag-sort'; @@ -157,9 +170,11 @@ const styles = StyleSheet.create({ } }) export default Dragsort; +``` +##### AutoDragSortableView组件使用 -//方法2 +```js //此案例Item1、Item2不支持拖拽 import React, { useState } from "react"; import { View, Text } from 'react-native'; @@ -266,8 +281,11 @@ const AutoDragSortDemo = () => { }; export default AutoDragSortDemo; +``` + +##### AnySizeDragSortableView组件使用 -//方法3 +```js import React,{createRef} from 'react'; import { Text, @@ -513,6 +531,8 @@ abottom_desc: { }); ``` + + ## 约束与限制 ### 兼容性 -- Gitee From d73db4113df3b4720df53831bb69067752f0088c Mon Sep 17 00:00:00 2001 From: qianyu Date: Tue, 6 Feb 2024 15:06:04 +0800 Subject: [PATCH 4/4] =?UTF-8?q?[Issues:=20#I90ZMG]=20=E6=9B=B4=E6=96=B0rea?= =?UTF-8?q?ct-native-drag-sort=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-drag-sort.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/1224/react-native-drag-sort.md b/1224/react-native-drag-sort.md index 24ee1299..e65a55c8 100644 --- a/1224/react-native-drag-sort.md +++ b/1224/react-native-drag-sort.md @@ -34,12 +34,6 @@ yarn add react-native-drag-sort@2.4.4 npm i react-native-drag-sort@2.4.4 ``` -#### 导出模块 - -```js -export { DragSortableView, AutoDragSortableView, AnySizeDragSortableView } -``` - ### Tip > Use priority: DragSortableView > AutoDragSortableView > AnySizeDragSortableView -- Gitee