【免费下载链接】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 是一款基于 Reanimated 4 与 Gesture Handler 构建的 React Native 拖拽排序库提供 60fps 平滑动画、碰撞检测与完整 TypeScript 支持。本教程面向新手带你从零实现一个可水平滚动的排序列表——无论是标签栏、分类轮播还是自定义工具栏滑动重排的交互体验只需几行配置就能完成。 为什么选它水平排序列表的 5 大核心优势在 React Native 中实现「按住拖动 → 松手吸附 → 列表自动补位」这套交互手写通常需要几十行手势与动画代码而且很容易掉帧。react-native-reanimated-dnd 把这套逻辑封装成了开箱即用的Sortable组件丝滑 60fps动画全部运行在 Reanimated 4 的 Worklet 线程不阻塞 JS 主线程拖动过程不卡顿垂直 水平双方向同一套 API切换direction属性即可从竖排列表变成横排轮播边缘自动滚动拖拽靠近列表左右边缘时列表自动跟随滚动无需自己写滚动逻辑拖拽手柄模式可以指定「只有按住小把手才能拖动」适合卡片中带按钮的复杂 UITiny 类型安全约 70kb 的包体全量 TypeScript 定义配合 FlatList 虚拟列表可承载长列表⚡ 最快安装步骤3 个依赖搞定环境水平排序功能属于库的核心能力安装主包 3 个 peer 依赖即可npm install react-native-reanimated-dnd npm install react-native-reanimated react-native-gesture-handler react-native-worklets版本要求react-native-reanimated4.x、react-native-gesture-handler2.x、react-native-worklets0.7见 package.json。Expo 项目可用npx expo install安装完整步骤参考 documentation/web-docs/docs/getting-started/installation.md。️ 3 步实现水平排序列表第 1 步准备数据。每条数据必须带一个稳定的id字符串字段interface Tag { id: string; label: string; color: string; }第 2 步配置Sortable组件。关键是directionhorizontal此时itemWidth每项固定宽度变为必填参数Sortable data{tags} renderItem{renderTag} directionhorizontal // 开启水平模式 itemWidth{120} // 水平模式必填每项宽度 gap{12} // 项间距 paddingHorizontal{16} // 容器左右内边距 /第 3 步在renderItem中返回SortableItem。把组件传入的positions、leftBound、autoScrollHorizontalDirection等状态原样透传库就会自动接管拖拽、动画与重排const renderTag ({ item, id, positions, leftBound, autoScrollHorizontalDirection, itemsCount, itemWidth, gap, paddingHorizontal }) ( SortableItem key{id} id{id} data{item} positions{positions} leftBound{leftBound} autoScrollHorizontalDirection{autoScrollHorizontalDirection} itemsCount{itemsCount} directionhorizontal itemWidth{itemWidth} gap{gap} paddingHorizontal{paddingHorizontal} View style{{ backgroundColor: item.color, borderRadius: 20 }} Text{item.label}/Text /View /SortableItem );运行后你就能获得完整的滑动重排体验长按约 200ms 触发拖起源码见 hooks/useHorizontalSortable.ts拖动中其他项自动让位松手后弹簧动画归位。下面的动画演示了库的整体拖拽效果 关键参数配置表宽度、间距与自动滚动参数必填说明direction是设为horizontal或SortableDirection.Horizontal开启水平模式itemWidth是每项固定宽度水平模式下所有项必须同宽gap否项与项之间的像素间距推荐 8–16paddingHorizontal否容器左右内边距containerWidth否容器宽度用于自动滚动计算可用useWindowDimensions传入屏幕宽useFlatList否默认true用 FlatList 虚拟列表渲染长列表性能更好itemKeyExtractor否自定义从数据中提取id的方式默认取item.id回调方面SortableItem提供了完整的拖拽生命周期钩子onDragStart拖起、onDragging拖动中可拿到当前悬停项与 X 坐标、onMove位置变化、onDrop落下附allPositions全量位置。完整参数表见 documentation/web-docs/docs/hooks/useHorizontalSortable.md。 拖拽手柄模式只按住图标才能重排如果卡片上有按钮或输入框整卡可拖会误触。此时用SortableItem.Handle包裹一个小把手只要注册了手柄整卡拖拽手势会自动禁用该逻辑在 hooks/useHorizontalSortable.ts 中实现SortableItem.Handle Icon namedrag-handle size{16} / /SortableItem.Handle仓库示例应用里就内置了「整卡拖 / 手柄拖」两种模式的切换演示可直接对照example-app/components/HorizontalSortableExample.tsx。 自动滚动原理拖到边缘 60px 内列表自动跟随水平列表最常见的痛点是屏幕一次只显示几个项要拖到远处的位置必须先手动滚动。这个库把它做成了自动的——拖拽中当项接近左/右边缘阈值不小于 60px见 components/sortableUtils.ts列表会平滑地向对应方向滚动松手前你能把项一路「送」到列表末端。整个滚动状态通过useHorizontalSortableList的scrollX与autoScroll共享值驱动列表手动滑动时也能与拖拽状态正确同步。⚠️ 常见坑与状态管理onMove 里别急着 setState这是新手最容易踩的坑Sortable组件自己维护排序状态拖动时的重排、动画补位都由内部状态驱动。正确姿势是✅ 在onMove里做日志、埋点等副作用✅ 在onDrop的allPositions参数中读取最终顺序并持久化❌ 不要在onMove里直接setState重排外部数组会破坏内部状态导致动画错乱官方文档明确写了这一条详见 documentation/web-docs/docs/components/sortable.md。 性能优化清单4 个要点保证不掉帧保持 FlatList 虚拟列表默认开启项数上百时不要关闭稳定的 id数据项的id在重渲染间必须稳定否则位置映射会错乱回调记忆化onMove、onDrop等用useCallback包裹避免重复创建拖拽中样式用isMoving切换透明度、缩放等视觉反馈只在拖起时应用参考示例应用中标签的高亮处理 适用场景4 类高频水平重排交互标签选择器技术栈标签、关注话题用户可自定义展示顺序分类轮播商品分类、频道入口横向卡片带拖拽手柄导航 Tab / 工具栏让用户自定义功能入口顺序媒体轮播图片、视频缩略图按优先级排序更多场景与完整示例代码见官方文档 documentation/web-docs/docs/examples/horizontal-sortable.mdx。 源码与文档导航模块路径排序组件水平模式入口components/Sortable.tsx水平项组件components/SortableItem.tsx单项拖拽逻辑hooks/useHorizontalSortable.ts列表状态管理hooks/useHorizontalSortableList.ts自动滚动工具函数components/sortableUtils.ts示例应用可运行 Demoexample-app/components/HorizontalSortableExample.tsx水平排序文档页documentation/web-docs/docs/examples/horizontal-sortable.mdx总结用 react-native-reanimated-dnd 打造水平排序列表只需要记住三件事装上库和 3 个依赖、给Sortable加上directionhorizontal和itemWidth、把SortableItem的透传状态接好。长按拖起、边缘自动滚动、弹簧归位动画全部内置你只需专注设计每项的 UI。从标签栏到媒体轮播这套滑动重排交互可以直接搬进你的产品里。赞分享【免费下载链接】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拖拽排序完整教程打造流畅的移动端交互体验React Native拖拽排序完整教程打造流畅的移动端交互体验 在移动应用开发中列表元素的拖放排序是提升用户体验的重要功能。react native drReact-Native可排序列表视图教程React Native可排序列表视图教程 1. 项目介绍 React Native可排序列表视图是一个适用于Android和iOS的React Native组如何用React DnD构建可排序列表完整实现指南如何用React DnD构建可排序列表完整实现指南 React DnD拖放是一个强大的React拖放库专门用于构建复杂的拖放界面。本文将为你展示如何使用前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考