# ty-react-native-drag-sort

**Repository Path**: kunyuan-hongke/ty-react-native-drag-sort

## Basic Information

- **Project Name**: ty-react-native-drag-sort
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: sig
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-03
- **Last Updated**: 2025-06-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

>模板版本：v0.3.0

<p align="center">
  <h1 align="center"> <code>react-native-drag-sort</code> </h1>
</p>

本项目基于 [react-native-image-crop-picker@2.4.2](https://github.com/mochixuan/react-native-drag-sort) 开发。

> [!TIP] [Gitee 地址](https://gitee.com/kunyuan-hongke/ty-react-native-drag-sort)

## 安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：[@tuya-oh/react-native-drag-sort Releases](https://gitee.com/kunyuan-hongke/ty-react-native-drag-sort/releases) 。对于未发布到npm的旧版本，请参考[安装指南](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/tgz-usage.md)安装tgz包。

进入到工程目录并输入以下命令：

<!-- tabs:start -->

#### npm

```bash
npm i @tuya-oh/react-native-drag-sort --save 
```

#### yarn

```bash
yarn add @tuya-oh/react-native-drag-sort
```

### 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)
| ------ | ----------- | 
![Anysize](./img/any1.gif) | ![Anysize](./img/any2.gif)

[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)
| ------ | ----------- | 
| ![](./img/auto1.gif) | ![](./img/auto2.gif) 

[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)  
| ------ | ----------- |
| ![](./img/scroll_fixed_add.gif)  | ![](./img/drag_delete.gif)  

[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)  
| ------ | ----------- | 
| ![](./img/sort_and_fixed.gif)  | ![](./img/one_row.gif)  

<!-- tabs:end -->

下面的代码展示了这个库的基本使用场景：

> [!WARNING] 使用时 import 的库名不变。

### 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 =======
```

## Link

无需 link

## 约束与限制

无

## 属性与方法

> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。

> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

#### AutoDragSortableView、DragSortableView

| Name                     | Type   | Description                                                             | Required | Platform | HarmonyOS Support |
| ------------------------ | ------ | ----------------------------------------------------------------------- |:--------:|:--------:|:-----------------:|
| **dataSource** *         | array  |                                                                         | yes      | all      | yes               |
| **parentWidth**          | number | parent width                                                            | yes      | all      | yes               |
| **childrenHeight** *     | number | Each item height                                                        | yes      | all      | yes               |
| **childrenWidth** *      | number | Each item width                                                         | yes      | all      | yes               |
| **marginChildrenTop**    | number | So the item's outermost view adds margin, you can only use this method. | no       | all      | yes               |
| **marginChildrenBottom** | number |                                                                         | no       | all      | yes               |
| **marginChildrenLeft**   | number |                                                                         | no       | all      | yes               |
| **marginChildrenRight**  | number |                                                                         | no       | all      | yes               |
| **sortable**             | bool   | Do not allow dragging                                                   | no       | all      | yes               |
| **onClickItem**          | func   | click                                                                   | no       | all      | yes               |
| **onDragStart**          | func   |                                                                         | no       | all      | yes               |
| **onDragEnd**            | func   |                                                                         | no       | all      | yes               |
| **onDataChange**         | func   | This method is called every time the data changes.                      | no       | all      | yes               |
| **renderItem** *         | func   | render item view                                                        | yes      | all      | yes               |
| **fixedItems**           | array  | no remove                                                               | no       | all      | yes               |
| **keyExtractor**         | func   | (item,index) => key                                                     | no       | all      | yes               |
| **delayLongPress**       | number |                                                                         | no       | all      | yes               |
| **isDragFreely**         | bool   | Whether to limit the drag space                                         | no       | all      | yes               |
| **onDragging**           | func   |                                                                         | no       | all      | yes               |
| **maxScale**             | number |                                                                         | no       | all      | yes               |
| **minOpacity**           | number |                                                                         | no       | all      | yes               |

#### The following attributes belong only to AutoDragSortableView

| Name                      | Type                                                     | Description | Required | Platform | HarmonyOS Support |
| ------------------------- | -------------------------------------------------------- | ----------- |:--------:|:--------:|:-----------------:|
| **scaleDuration**         | number                                                   |             | no       | all      | yes               |
| **slideDuration**         | number                                                   |             | no       | all      | yes               |
| **autoThrottle**          | number                                                   |             | no       | all      | yes               |
| **autoThrottleDuration**  | number                                                   |             | no       | all      | yes               |
| **renderHeaderView**      | element                                                  |             | no       | all      | yes               |
| **headerViewHeight**      | number                                                   |             | no       | all      | yes               |
| **scrollIndicatorInsets** | ({top:number, left:number, bottom:number, right:number}) |             | no       | ios      | no                |
| **renderBottomView**      | element                                                  |             | no       | all      | yes               |
| **bottomViewHeight**      | number                                                   |             | no       | all      | yes               |
| **onScrollListener**      | (event: NativeSyntheticEvent<NativeScrollEvent>) => void |             | no       | all      | yes               |
| **onScrollRef**           | (ref: any) => void                                       |             | no       | all      | yes               |

#### AnySizeDragSortableView

| Name                      | Type                                                     | Description                                        | Required | Platform | HarmonyOS Support |
| ------------------------- | -------------------------------------------------------- | -------------------------------------------------- |:--------:|:--------:| ----------------- |
| **dataSource** *          | array                                                    |                                                    | yes      | all      | yes               |
| **keyExtractor**          | func.isRequired                                          | (item,index) => key                                | no       | all      | yes               |
| **renderItem** *          | func                                                     | render item view                                   | yes      | all      | yes               |
| **onDataChange**          | func                                                     | This method is called every time the data changes. | no       | all      | yes               |
| **renderHeaderView**      | element                                                  |                                                    | no       | all      | yes               |
| **headerViewHeight**      | number                                                   |                                                    | no       | all      | yes               |
| **renderBottomView**      | element                                                  |                                                    | no       | all      | yes               |
| **bottomViewHeight**      | number                                                   |                                                    | no       | all      | yes               |
| **autoThrottle**          | number                                                   |                                                    | no       | all      | yes               |
| **autoThrottleDuration**  | number                                                   |                                                    | no       | all      | yes               |
| **onDragEnd**             | func                                                     |                                                    | no       | all      | yes               |
| **scrollIndicatorInsets** | ({top:number, left:number, bottom:number, right:number}) |                                                    | no       | all      | yes               |
| **onScrollListener**      | (event: NativeSyntheticEvent<NativeScrollEvent>) => void |                                                    | no       | all      | yes               |
| **onScrollRef**           | (ref: any) => void                                       |                                                    | no       | all      | yes               |
| **areaOverlapRatio**      | number                                                   | Must be greater than 0.5                           | no       | all      | yes               |
| **movedWrapStyle**        | StyleProp<ViewStyle>                                     | style                                              | no       | all      | yes               |
| **childMarginTop**        | number                                                   |                                                    | no       | all      | yes               |
| **childMarginBottom**     | number                                                   |                                                    | no       | all      | yes               |
| **childMarginLeft**       | number                                                   |                                                    | no       | all      | yes               |
| **childMarginRight**      | number                                                   |                                                    | no       | all      |                   |

## 遗留问题

无

## 开源协议

本项目基于 [MIT License (MIT)](https://gitee.com/kunyuan-hongke/ty-react-native-drag-sort/blob/sig/LICENSE) ，请自由地享受和参与开源。