SuperAPI AI 工具集

reanimated-dnd

前端与建站

查看项目

更新于 10-15 21:38

技能介绍

用途:为 React Native 应用集成 react-native-reanimated-dnd,实现拖放、可排序列表、可排序网格与放置区。

主要能力:提供 DropProvider、Draggable、Droppable 组件完成拖放;Sortable/SortableItem 支持垂直与水平重排列表;SortableGrid/SortableGridItem 支持二维网格的插入或交换重排;支持拖拽手柄、轴向锁定、边界约束、三种碰撞检测(intersect、center、contain)、放置区容量限制、动态高度测量、自定义回弹动画与拖拽状态跟踪。另提供 useDraggable 等底层 hooks 供自定义实现。

使用方式:安装 npm install react-native-reanimated-dnd(或 yarn add),并单独安装 peer 依赖 react-native-reanimated、react-native-gesture-handler、react-native-worklets;应用根节点需用 GestureHandlerRootView 包裹。所有数据项必须带 id: string 属性。拖放场景用 DropProvider 包裹 Draggable 与 Droppable;列表用 Sortable 配合 renderItem 与 itemHeight/itemWidth;网格用 SortableGrid 配合 dimensions、orientation、strategy。

适用场景:需要拖拽排序、看板式拖放、标签重排、网格布局调整的 React Native 界面。

限制:要求 react-native-reanimated >=4.2.0、react-native-gesture-handler >=2.28.0、react-native-worklets >=0.7.0;垂直列表必须提供 itemHeight,水平列表必须提供 itemWidth;资料未提供收费、价格或平台支持范围等信息。