react-native-drax

> 编程语言

开源

React Native 的拖放系统

703 stars0 点赞1 次浏览

访问官网 GitHub

工具介绍

React Native 的拖放系统

React-native-drax

概述

Drax 是一个用 TypeScript 编写的用于 React Native 的声明式拖放框架。它支持自由形式的拖放、可排序的列表和网格、交叉列重新排序、拖放手柄、碰撞算法等。基于 Reanimated 4 和 Gesture Handler 3,采用 UI 线程优先架构,可实现流畅的 60fps 交互。 平台: iOS、Android、Web

✨ 亮点

不依赖列表可排序 — 与 FlatList、FlashList、LegendList 或任何列表组件兼容
跨容器拖动 — 将项目移动到列表之间（跨列表重新排序）
⚡ UI 线程碰撞检测 — 空间索引工作线程，用于快速检测接收器
✊ 拖动手柄 — 只有手柄开始拖动，其余部分进行滚动
碰撞算法 — 中心、交叉或包含
拖动范围 — 限制拖动在视图内
悬停样式 — 根据拖动阶段和接收器状态生成条件样式
放置区域接受 — 使用 acceptsDrag 接受或拒绝放置
动画预设 — 默认、弹簧、温和、快速、无 — 或自定义配置
对齐捕捉 — 在接收器内捕捉到 9 点对齐
♿ 可访问性 — 自动生成标签，减少运动支持
19 个回调事件 — 全面控制拖动生命周期
️ 新架构兼容（Fabric）

特性	Drax	reanimated-dnd	sortables
自由形式拖放	✅	✅	➖
可排序列表/网格	✅	✅	✅
混合大小网格（非统一跨度）	✅	➖	➖
跨容器/跨列表重新排序	⚠️ 实验性	➖	➖
无列表依赖性（FlatList、FlashList、LegendList）	✅	➖	➖
拖放手柄	✅	✅	✅
拖放状态样式	15 个属性 + 不活跃	onStateChange	5 个属性 + 钩子
控件指示器	✅	➖	仅适用于网格
UI 线程 DnD 碰撞	✅	➖	➖
事件回调	19 种类型	~12 种类型	~10 种类型
Ac