`<Draggable>`

一个适用于 ReactLynx 的无样式拖拽组件，通过主线程执行提供拖拽基础能力。

基本用法

Draggable 支持两种手势模式：immediate（触摸后立即开始拖拽）和 longpress（长按后开始拖拽）。你也可以控制拖拽结束后的位置是重置，还是保留当前的 transform 位置。

带边界限制

可拖拽区域可以通过 min(max)TranslateX/Y 属性进行限制。

结构

整个组件都可以被拖拽。

<Draggable />

只有 DraggableArea 会响应拖拽手势。

<DraggableRoot>
  <DraggableArea />
</DraggableRoot>

API

Draggable

allowedDirection

iOS

Android

Harmony

类型directions·默认值'all'

允许的拖拽方向

children

iOS

Android

Harmony

类型ReactNode

子节点

className

iOS

Android

Harmony

类型string

类名

debugLog

iOS

Android

Harmony

类型boolean·默认值false

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

draggableProps

iOS

Android

Harmony

类型ViewProps

可拖拽组件的额外属性。接受普通 view 的所有属性。

enableDragging

iOS

Android

Harmony

类型boolean·默认值true

组件是否可拖拽

iOS

Android

Harmony

类型string

maxTranslateX

iOS

Android

Harmony

类型number

X 轴方向 translate 的最大值

maxTranslateY

iOS

Android

Harmony

类型number

Y 轴方向 translate 的最大值

minTranslateX

iOS

Android

Harmony

类型number

X 轴方向 translate 的最小值

minTranslateY

iOS

Android

Harmony

类型number

Y 轴方向 translate 的最小值

MTSRef

iOS

Android

Harmony

类型RefObject

main-thread:ref

onDragEnd

iOS

Android

Harmony

类型(translate: Point) => void

当拖拽结束时触发

onDragging

iOS

Android

Harmony

类型(translate: Point) => void

当拖拽进行时触发

onDragStart

iOS

Android

Harmony

类型(pagePoint: Point) => void

当拖拽开始时触发

onMTSDragEnd

iOS

Android

Harmony

类型(translate: Point, event: MouseEvent | TouchEvent) => void

当拖拽结束时触发。在主线程运行，可以执行更及时的 UI 操作。请确保传入的 handler 是主线程函数，即带有 'main thread' 标记的函数。

onMTSDragging

iOS

Android

Harmony

类型(translate: Point, event: MouseEvent | TouchEvent) => void

当拖拽结束时触发。在主线程运行，可以执行更及时的 UI 操作。请确保传入的 handler 是主线程函数，即带有 'main thread' 标记的函数。

onMTSDragStart

iOS

Android

Harmony

类型(pagePoint: Point, event: MouseEvent | TouchEvent) => void

当拖拽进行时触发。在主线程运行，可以执行更及时的 UI 操作。请确保传入的 handler 是主线程函数，即带有 'main thread' 标记的函数。

resetOnEnd

iOS

Android

Harmony

类型boolean

当拖拽结束时复位 transform

style

iOS

Android

Harmony

类型CSSProperties

样式

trigger

iOS

Android

Harmony

类型longpress | immediate·默认值'longpress'

触发拖拽的方式

DraggableArea

children

iOS

Android

Harmony

类型ReactNode

子节点

className

iOS

Android

Harmony

类型string

类名

iOS

Android

Harmony

类型string

style

iOS

Android

Harmony

类型CSSProperties

样式

#<Draggable>

#基本用法

#带边界限制

#结构

#API

#Draggable

#DraggableArea

`<Draggable>`

基本用法

带边界限制

结构

API

Draggable

DraggableArea