`<Sortable>`

一个适用于 ReactLynx 的无样式可排序列表组件，通过主线程动画提供列表重排基础能力。

基本用法

无边界拖拽

如果未提供 boundaryId，则 SortableItem 可以不受限制地自由拖拽。

禁用所有拖拽和排序行为

结构

整个 SortableItem 都可以被拖拽。

 <SortableRoot data={data}>
    {(item: SortableData<string>) => {
      return (
        <SortableItem />
      )
    }}
 </SortableRoot>

只有 SortableItemArea 可以被拖拽。

 <SortableRoot data={data}>
    {(item: SortableData<string>) => {
      return (
        <SortableItem as='DraggableRoot' >
          <SortableItemArea />
        </SortableItem>
      )
    }}
 </SortableRoot>

API

SortableRootProps

iOS

Android

Harmony

类型'ScrollView'

指定 SortableRoot 渲染并持有的滚动容器类型。 - 'ScrollView'：渲染一个内部的纵向 scroll-view。 - 不传（默认）：渲染普通 view，不带滚动能力。

boundaryId

iOS

Android

Harmony

类型string

作为边界限制的项的唯一键。如果项被拖出边界，排序将被取消。

children

iOS

Android

Harmony

类型(item: {dataItem: T, getSortingKey: () => string}) => ReactNode

子节点，是一个接收 item 并返回 ReactNode 的函数。

data

iOS

Android

Harmony

类型SortableData<T>[]

拖拽列表的数据。

debugLog

iOS

Android

Harmony

类型boolean·默认值false

显示调试日志，发现问题时开启。

enableSorting

iOS

Android

Harmony

类型boolean·默认值true

是否启用排序。

onSortEnd

iOS

Android

Harmony

类型(sortedData: SortableData<T>[]) => void

排序结束时触发的回调函数。参数为排序后的data。

onSortStart

iOS

Android

Harmony

类型() => void

拖拽排序开始时触发的回调函数。

scrollableBoundaryId

iOS

Android

Harmony

类型string

可滚动边界容器的唯一 id。当拖拽项触达该容器边缘时，Sortable 会对其调用 scrollBy，使列表随拖拽方向继续滚动。

scrollableClassName

iOS

Android

Harmony

类型string

as 为 'ScrollView' 时应用到内部 scroll-view 的类名。

scrollableContentClassName

iOS

Android

Harmony

类型string

as 为 'ScrollView' 时应用到内部内容边界 view 的类名。

scrollableEnableScroll

iOS

Android

Harmony

类型boolean·默认值true

内部 scroll-view 是否允许用户手势滚动。

scrollableStickyLowerOffset

iOS

Android

Harmony

类型number·默认值0

向下自动滚动时，拖拽项与可滚动边界下边缘之间保持的距离。

scrollableStickyUpperOffset

iOS

Android

Harmony

类型number·默认值0

向上自动滚动时，拖拽项与可滚动边界上边缘之间保持的距离。

SortableItemProps

iOS

Android

Harmony

类型Draggable | DraggableRoot·默认值'Draggable'

指定底层组件。若整个子节点区域均可拖动，使用默认值 'Draggable'；否则使用 'DraggableRoot'，'DraggableRoot' 需与子节点 'DraggableArea' 一起使用。仅触摸其子节点 'DraggableArea' 时可拖动。

children

iOS

Android

Harmony

类型ReactNode

子节点。

className

iOS

Android

Harmony

类型string

类名

disabled

iOS

Android

Harmony

类型boolean·默认值false

是否禁用该项的拖拽排序。被禁用的项： - 自身无法被拖动。其上不会绑定 touch / longpress 等手势，触摸该项不会触发任何排序操作。 - 不会因为其他项的拖动而发生位移，始终保持在原位置。 - 在最终排序结果中始终保持其绝对位置不变；其他项仍可自由地越过它进行排序，仅未被禁用项之间的相对顺序会发生变化。该属性只影响被禁用的项自身；其它（未被禁用的）项的交互能力不受影响。

sortingKey

iOS

Android

Harmony

类型string

用于排序的唯一键。

SortableData

dataItem

iOS

Android

Harmony

类型T

原始数据项。

getSortingKey

iOS

Android

Harmony

类型() => string

返回子节点用于排序的唯一键的函数。

#<Sortable>

#基本用法

#无边界拖拽

#禁用所有拖拽和排序行为

#结构

#API

#SortableRootProps

#SortableItemProps

#SortableData

`<Sortable>`

基本用法

无边界拖拽

禁用所有拖拽和排序行为

结构

API

SortableRootProps

SortableItemProps

SortableData