【免费下载链接】react-native-reanimated-dndA powerful, performant drag-and-drop library for React Native built on Reanimated 4 and Gesture Handler. Smooth 60fps animations, sortable lists grids, collision detection, and full TypeScript support.项目地址https://gitcode.com/gh_mirrors/re/react-native-reanimated-dnd点击查看免费下载react-native-reanimated-dnd是一个专为 React Native 打造的高性能拖拽交互drag-and-drop库基于 Reanimated 4 与 Gesture Handler 构建能实现流畅的 60fps 动画、拖拽排序列表/网格、碰撞检测并提供完整的 TypeScript 支持。本教程带你从零安装、到跑通第一个可拖拽、可放置、可排序的交互界面全程面向新手代码量极少。为什么选 react-native-reanimated-dnd很多拖拽库是从 Web 移植过来的在移动端要么卡顿、要么早已停更。而这个库是为移动端原生设计的完整生态核心卖点特性说明 高性能Reanimated 4 Worklets 驱动稳定 60fps 移动端优先专为 RN 设计非 Web 移植 组件全家桶Draggable/Droppable/Sortable/SortableGrid 智能碰撞检测center、intersect、contain 三种算法 可排序列表支持垂直、水平方向含自动滚动 可排序网格2D 网格拖放支持插入/交换模式 全类型安全完整 TypeScript 类型定义 体积小解压后仅约 70KB不拖累包体 一句话记忆想拖拽 →Draggable想接住 →Droppable想排序 →Sortable。环境要求与一键安装步骤1. 确认版本兼容该库依赖几个搭档包需要一起安装。版本对照如下react-native-reanimated-dndReact NativeReanimatedGesture HandlerWorkletsExpo SDK2.x.x0.804.x.x2.280.755⚠️ Reanimated 4要求启用 New Architecture且 Expo 项目必须用开发构建development build不能用 Expo Go。2. 安装命令普通 React Native CLI 项目npm install react-native-reanimated-dnd npm install react-native-reanimated react-native-gesture-handler react-native-workletsExpo 项目SDK 55npx expo install react-native-reanimated-dnd react-native-reanimated react-native-worklets react-native-gesture-handler3. 两个必做配置Babel 插件在babel.config.js中把react-native-worklets/plugin放在插件数组的最后一位。根视图包裹用GestureHandlerRootView包裹整个应用它是手势识别生效的前提。安装配置的细节可参考仓库内文档installation.md。三个核心组件DropProvider、Draggable、Droppable理解拖拽库先记住它的组件层级结构上下文通信架构App └── GestureHandlerRootView ← 手势根容器必需 └── DropProvider ← 创建拖放上下文必需 ├── Draggable ← 可被拖动的物品 └── Droppable ← 可接收物品的区域DropProvider整个拖放系统的地基负责组件注册、碰撞检测、状态与位置跟踪。所有拖放组件都必须放在它的内部。源码见 context/DropContext.tsx。Draggable被拖动的对象通过data属性携带数据源文件 components/Draggable.tsx。Droppable目标区域通过onDrop回调接收数据源文件 components/Droppable.tsx。数据流很简单Draggable携带的数据会在被放下时通过Droppable的onDrop回调传递给你。跑通第一个拖拽示例下面是最小可运行的拖到目标区域示例跟着写一遍即可上手import { GestureHandlerRootView } from react-native-gesture-handler; import { DropProvider, Draggable, Droppable } from react-native-reanimated-dnd; export default function App() { return ( GestureHandlerRootView style{{ flex: 1 }} DropProvider Droppable onDrop{(data) console.log(放下了:, data)} View Text放到这里/Text /View /Droppable Draggable data{{ id: 1, title: 拖我一下 }} View Text拖我一下/Text /View /Draggable /DropProvider /GestureHandlerRootView ); }如果能把拖我一下拖进放到这里的区域就说明环境已搭好 ✅。完整的验证组件见快速上手文档quick-start.md。进阶用 Sortable 做出拖拽排序列表当你不想拖到某处而是想拖动列表项重新排序如音乐播放队列、任务列表时就用SortableSortableItem。它们会自动处理重排动画与自动滚动无需你手动管理数组。使用要点来自 README 的 Sortable List 示例每个数据项必须有字符串类型的id这是库追踪与重排的依据Sortable通过data传入数组、renderItem渲染每一项、itemHeight指定项高度可用SortableItem.Handle声明一个专属拖拽手柄区域如右侧的 ⋮⋮。⚠️ 状态管理提醒排序组件维护内部状态。不要在onMove回调里直接去改外部数组setItems、Redux 等onMove只用于埋点、日志等副作用组件会自动完成内部重排。组件与 Hook 源码参考components/Sortable.tsx、components/SortableItem.tsx、hooks/useSortable.ts。新手常见问题快速排查现象大概率原因与解法Cannot read property install of undefinedReanimated 未装好确认 Babel 已加插件、重启 Metro、重新构建RNGestureHandlerModule is nullGesture Handler 未链接iOS 跑pod installExpo 确认用开发构建而非 Expo GoMetro 打包异常npx expo start -c或npx react-native start --reset-cache清缓存Expo Go 里跑不起来库含原生代码必须用npx expo run:ios / run:android开发构建更完整的排查清单见 installation.md 的 Troubleshooting 一节。想直接看完整效果运行官方示例 App仓库内置了包含18 个交互式 Demo的示例应用覆盖基本拖放、拖拽手柄、碰撞检测、边界约束、动态高度、网格排序等全部能力。可先克隆仓库git clone https://gitcode.com/gh_mirrors/re/react-native-reanimated-dnd cd react-native-reanimated-dnd npm install然后按 example-app/README.md 启动入口在 example-app/App.tsx示例组件集中在 example-app/components/ 目录下。小结与下一步用DropProviderGestureHandlerRootView搭好地基用Draggable/Droppable实现最基本的拖放交互用Sortable/SortableItem以及SortableGrid实现拖拽排序记住数据项必须有字符串id排序组件不要手动改外部状态。接下来建议阅读 basic-concepts.md 理解上下文通信架构并在 index.ts 中查看当前导出的全部组件、Hooks 与工具函数逐步解锁更多高级能力。赞分享【免费下载链接】react-native-reanimated-dndA powerful, performant drag-and-drop library for React Native built on Reanimated 4 and Gesture Handler. Smooth 60fps animations, sortable lists grids, collision detection, and full TypeScript support.项目地址https://gitcode.com/gh_mirrors/re/react-native-reanimated-dnd点击查看免费下载相关推荐React DnD终极指南5分钟快速搭建你的第一个拖拽应用React DnD终极指南5分钟快速搭建你的第一个拖拽应用 想要为你的React应用添加流畅的拖拽功能吗React DnD是一个强大的拖放库专门为Reac前端UI组件React Native Bottom Sheet v4 基础使用指南从零搭建第一个可交互 BottomSheetReact Native Bottom Sheet v4 基础使用指南从零搭建第一个可交互 BottomSheet 本指南以仓库中 website/versi前端移动开发UI组件跨平台Data Formulator拖拽交互React DND实现原理Data Formulator拖拽交互React DND实现原理 引言拖拽交互在数据可视化中的核心价值 在数据可视化工具中拖拽交互Drag and Dr数据可视化人工智能AI 应用数据分析前端后端AI Agent创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考