Star33
4
代码
代码
Issues1
Pull Requests1
项目讨论
Wiki
分析
Star33
4
已合并
docs: upgrade README to v0.4.2 template for br_rnoh0.72 #5
fangzhen创建于 9月16日
docs: upgrade README to v0.4.2 template for br_rnoh0.72 #5
已合并
fangzhen创建于 9月16日
从fangyygw/react-native-drag-sortbr_rnoh0.72合入到CPF-RN/react-native-drag-sortbr_rnoh0.72
共 2 个文件变更+1032-7
MREADME.md+513-7
@@ -1,13 +1,519 @@
1-# @react-native-ohos/react-native-drag-sort1+> 文档模板：v0.4.2
2 2 
3-This project is based on [react-native-drag-sort](https://github.com/mochixuan/react-native-drag-sort)3+<p align="center">
4+ <h1 align="center"> <code>react-native-drag-sort</code> </h1>
5+</p>
4 6 
5-## Documentation7+本项目基于 [react-native-drag-sort](https://github.com/mochixuan/react-native-drag-sort) 开发。
6 8 
7-- [中文](https://gitcode.com/CPF-RN/usage-docs/blob/master/zh-cn/react-native-drag-sort.md)9+该第三方库的仓库已迁移至 GitCode，且支持直接从 npm 下载，新的包名为：`@react-native-ohos/react-native-drag-sort`，版本所属关系如下：
8 10 
9-- [English](https://gitcode.com/CPF-RN/usage-docs/blob/master/en/react-native-drag-sort.md)11+| 三方库名称 | 三方库版本（npm地址） | 发布信息 | 支持RN版本 | Autolink | 编译API版本 | 社区基线版本 | 源码地址 |
12+| --- | --- | --- | --- | --- | --- | --- | --- |
13+| @react-native-ohos/react-native-drag-sort | [~2.4.5](https://www.npmjs.com/package/@react-native-ohos/react-native-drag-sort) | [GitCode Releases](https://gitcode.com/CPF-RN/react-native-drag-sort/releases) | 0.72.* | 否 | API12+ | 2.4.4 | [br_rnoh0.72](https://gitcode.com/CPF-RN/react-native-drag-sort/tree/br_rnoh0.72) |
14+| @react-native-oh-tpl/react-native-drag-sort | [<=2.4.4-0.1.0@deprecated](https://www.npmjs.com/package/@react-native-oh-tpl/react-native-drag-sort) | [Github Releases(deprecated)](https://github.com/react-native-oh-library/react-native-drag-sort/releases) | 0.72.* | 否 | API12+ | 2.4.4 | [sig](https://github.com/react-native-oh-library/react-native-drag-sort) |
10 15 
11-## License16+## 简介
12 17 
13-This library is licensed under [The Apache-2.0 License (Apache-2.0)](https://github.com/mochixuan/react-native-drag-sort/blob/master/LICENSE)18+react-native-drag-sort 是一个适用于 React Native 的拖拽排序组件库，提供 DragSortableView、AutoDragSortableView、AnySizeDragSortableView 三个组件。<br/>
19+DragSortableView 适用于子项宽高固定、不需要滑动的场景；AutoDragSortableView 适用于子项宽高固定、需要自动滑动的场景；AnySizeDragSortableView 适用于子项宽高任意、需要滑动的场景。
20+ 
21+## 下载安装
22+ 
23+进入到工程目录并输入以下命令：
24+ 
25+**npm**
26+ 
27+```bash
28+npm install @react-native-ohos/react-native-drag-sort
29+```
30+ 
31+**yarn**
32+ 
33+```bash
34+yarn add @react-native-ohos/react-native-drag-sort
35+```
36+ 
37+## 约束与限制
38+ 
39+### 兼容性
40+ 
41+本文档内容基于以下版本验证通过：
42+ 
43+1. RNOH: 0.72.98; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 5.0.3.906; ROM: NEXT.0.0.71;
44+ 
45+### 权限要求
46+ 
47+无特殊权限要求。
48+ 
49+## 使用示例
50+ 
51+下面的代码展示了这个库的基本使用场景：
52+ 
53+> [!WARNING] 使用时 import 的库名不变。
54+ 
55+```js
56+// 此案例 id1、id2 不支持拖拽
57+import React, { useState } from "react";
58+import { View, Text, StyleSheet, SafeAreaView } from "react-native";
59+import { DragSortableView } from "react-native-drag-sort";
60+ 
61+const Dragsort = () => {
62+ const [data, setData] = useState([
63+ { id: 1, title: "固定任务 1" },
64+ { id: 2, title: "固定任务 2" },
65+ { id: 3, title: "任务 3" },
66+ { id: 4, title: "任务 4" },
67+ { id: 5, title: "任务 5" },
68+ { id: 6, title: "任务 6" },
69+ { id: 7, title: "任务 7" },
70+ { id: 8, title: "任务 8" },
71+ ]);
72+ 
73+ return (
74+ <SafeAreaView style={{ flex: 1 }}>
75+ <View style={styles.header}>
76+ <Text style={styles.header_title}>DragSortableView</Text>
77+ </View>
78+ <DragSortableView
79+ dataSource={data}
80+ parentWidth={400}
81+ childrenWidth={100}
82+ childrenHeight={50}
83+ marginChildrenTop={5}
84+ marginChildrenBottom={5}
85+ marginChildrenLeft={5}
86+ marginChildrenRight={5}
87+ keyExtractor={(item, index) => item.id}
88+ onClickItem={(data, item, index) => {
89+ console.log("点击了第", index, "个元素");
90+ }}
91+ onDragStart={() => console.log("Drag started")}
92+ onDragEnd={() => console.log("Drag end")}
93+ onDataChange={() => {
94+ console.log("数据发生变化");
95+ }}
96+ fixedItems={[0, 1]}
97+ delayLongPress={100}
98+ isDragFreely={true}
99+ maxScale={1.2}
100+ minOpacity={0.7}
AREADME_en.md+519-0
@@ -0,0 +1,519 @@
1+> Document Template: v0.4.2
2+ 
3+<p align="center">
4+ <h1 align="center"> <code>react-native-drag-sort</code> </h1>
5+</p>
6+ 
7+This project is based on [react-native-drag-sort](https://github.com/mochixuan/react-native-drag-sort).
8+ 
9+This third-party library has been migrated to GitCode and is now available for direct download from npm, the new package name is: `@react-native-ohos/react-native-drag-sort`, the version correspondence details are as follows:
10+ 
11+| Name | Version(Npm Address) | Release Information | Supported RN Version | Supported Autolink | Compile API Version | Community Baseline Version | Source code address |
12+| --- | --- | --- | --- | --- | --- | --- | --- |
13+| @react-native-ohos/react-native-drag-sort | [~2.4.5](https://www.npmjs.com/package/@react-native-ohos/react-native-drag-sort) | [GitCode Releases](https://gitcode.com/CPF-RN/react-native-drag-sort/releases) | 0.72.* | No | API12+ | 2.4.4 | [br_rnoh0.72](https://gitcode.com/CPF-RN/react-native-drag-sort/tree/br_rnoh0.72) |
14+| @react-native-oh-tpl/react-native-drag-sort | [<=2.4.4-0.1.0@deprecated](https://www.npmjs.com/package/@react-native-oh-tpl/react-native-drag-sort) | [Github Releases(deprecated)](https://github.com/react-native-oh-library/react-native-drag-sort/releases) | 0.72.* | No | API12+ | 2.4.4 | [sig](https://github.com/react-native-oh-library/react-native-drag-sort) |
15+ 
16+## Introduction
17+ 
18+react-native-drag-sort is a drag and drop sort control for React Native, providing three components: DragSortableView, AutoDragSortableView and AnySizeDragSortableView.<br/>
19+DragSortableView is suitable for scenarios where the width and height are fixed and no sliding is needed; AutoDragSortableView is suitable for scenarios where the width and height are fixed and sliding is needed; AnySizeDragSortableView is suitable for scenarios where the width and height are arbitrary and sliding is needed.
20+ 
21+## Installation
22+ 
23+Go to the project directory and execute the following instruction:
24+ 
25+**npm**
26+ 
27+```bash
28+npm install @react-native-ohos/react-native-drag-sort
29+```
30+ 
31+**yarn**
32+ 
33+```bash
34+yarn add @react-native-ohos/react-native-drag-sort
35+```
36+ 
37+## Constraints
38+ 
39+### Compatibility
40+ 
41+This document is verified based on the following versions:
42+ 
43+1. RNOH: 0.72.98; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 5.0.3.906; ROM: NEXT.0.0.71;
44+ 
45+### Permission Requirements
46+ 
47+No special permission is required.
48+ 
49+## Example
50+ 
51+The following code shows the basic use scenario of this library:
52+ 
53+> [!WARNING] The name of the imported library remains unchanged.
54+ 
55+```js
56+// In this example, items with id 1 and id 2 do not support dragging
57+import React, { useState } from "react";
58+import { View, Text, StyleSheet, SafeAreaView } from "react-native";
59+import { DragSortableView } from "react-native-drag-sort";
60+ 
61+const Dragsort = () => {
62+ const [data, setData] = useState([
63+ { id: 1, title: "Fixed Task 1" },
64+ { id: 2, title: "Fixed Task 2" },
65+ { id: 3, title: "Task 3" },
66+ { id: 4, title: "Task 4" },
67+ { id: 5, title: "Task 5" },
68+ { id: 6, title: "Task 6" },
69+ { id: 7, title: "Task 7" },
70+ { id: 8, title: "Task 8" },
71+ ]);
72+ 
73+ return (
74+ <SafeAreaView style={{ flex: 1 }}>
75+ <View style={styles.header}>
76+ <Text style={styles.header_title}>DragSortableView</Text>
77+ </View>
78+ <DragSortableView
79+ dataSource={data}
80+ parentWidth={400}
81+ childrenWidth={100}
82+ childrenHeight={50}
83+ marginChildrenTop={5}
84+ marginChildrenBottom={5}
85+ marginChildrenLeft={5}
86+ marginChildrenRight={5}
87+ keyExtractor={(item, index) => item.id}
88+ onClickItem={(data, item, index) => {
89+ console.log("Clicked item", index);
90+ }}
91+ onDragStart={() => console.log("Drag started")}
92+ onDragEnd={() => console.log("Drag end")}
93+ onDataChange={() => {
94+ console.log("Data changed");
95+ }}
96+ fixedItems={[0, 1]}
97+ delayLongPress={100}
98+ isDragFreely={true}
99+ maxScale={1.2}
100+ minOpacity={0.7}