移动开发UI组件【免费下载链接】react-native-gesture-handlerDeclarative API exposing platform native touch and gesture system to React Native.项目地址https://gitcode.com/gh_mirrors/re/react-native-gesture-handler点击查看免费下载本文以仓库根目录的 CLAUDE.md 为核心骨架系统梳理 react-native-gesture-handler 的 monorepo 工程布局、v1/v2/v3 三代 API 的演进关系与默认使用策略并给出 Android、iOS、macOS 三端构建命令以及 TypeScript、Jest、ESLint 检查的完整操作流程。读完本文你可以快速定位仓库中各平台源码目录、理解新旧 API 共存机制并掌握从构建验证到代码格式化的一整套仓库级开发工作流。项目总览monorepo 与多平台支持react-native-gesture-handler 是 Software Mansion 维护的 React Native 手势库通过声明式 API 将平台原生的触摸与手势系统暴露给 React Native。根据 CLAUDE.md 的说明本项目采用monorepo 结构同时包含库本体packages/react-native-gesture-handler即发布到 npm 的react-native-gesture-handler包当前仓库版本为 2.29.0见 package.json文档站点packages/docs-gesture-handler基于 Docusaurus 的官方文档多个示例应用统一放置在 apps 目录下。根目录的 package.json 通过 Yarn workspaces 把上述包组织在一起其中packages/react-native-gesture-handler、apps/basic-example、apps/expo-example、apps/macos-example、apps/common-app均为 workspace 成员库包在示例中被以workspace:*方式直接引用保证示例始终测试的是仓库内最新源码见 apps/basic-example/package.json。该库是多平台的同时支持 Android、iOS、web 与 macOS各平台代码划分如下平台源码位置Androidpackages/react-native-gesture-handler/androidiOS 与 macOSApple 平台packages/react-native-gesture-handler/appleWebpackages/react-native-gesture-handler/src/web在源码组织上部分文件是平台特定的通过文件名后缀标明平台。例如 RNGestureHandlerModule.web.ts 是 web 专用实现而 RNGestureHandlerModule.ts 是移动端实现类似的平台后缀文件还包括GestureHandlerRootView.web.tsx、NativeProxy.web.ts、PlatformConstants.web.ts、findNodeHandle.web.ts、getShadowNodeFromRef.web.ts等它们与基础实现共同构成按平台分发的构建单元。示例应用三款应用的分工示例应用位于 apps 目录三款应用各有明确职责CLAUDE.mdapps/basic-example主要用来验证 Android 与 iOS 能否正确构建是最轻量的构建冒烟测试载体。apps/expo-example用于测试更高级的示例其业务源码实际位于共享的 apps/common-app 中。apps/macos-example用于验证库在 macOS 平台上的工作业务源码同样来自apps/common-app。其中 apps/common-app/src/new_api 是 v3 API 的示例集合new_api/index.tsx 将全部示例组织为 Simple Gestures、Showcase、Hover and mouse、Complicated、Components、Tests 等分组覆盖了 Basic Tap/Pan/Pinch/Rotation、Bottom Sheet、Chat Heads、Context Menu、Two Finger Pan、嵌套 Pressable/Touchable 等场景可直接作为学习 v3 API 的活教材。三代 API 的演进与默认使用策略这是本文档最核心的工程约定之一CLAUDE.md 明确指出项目包含 3 个版本的 API绝大多数逻辑是共享的但改动时务必保证不破坏旧 APIv3最新位于 packages/react-native-gesture-handler/src/v3是基于 hooks 的新一代 API也是当前开发默认目标。v2旧Gesture.*构造器式 API例如Gesture.Pan()、Gesture.Tap()对应packages/react-native-gesture-handler/src/handlers/gestures目录下的实现。v1最旧*GestureHandler组件式 API例如PanGestureHandler、TapGestureHandler对应 packages/react-native-gesture-handler/src/handlers 下的各 Handler 文件。新代码一律默认使用 v3CLAUDE.md 对 API 选择给出了强制约定Always use the v3 API by defaultfor any new code, examples, reproductions, or test screens.也就是说任何新代码、示例、Bug 复现或测试页面都应默认使用 v3。即便某个 bug 是针对旧 API 上报的也应先用 v3 复现一遍确认问题是否同样影响 v3只有当问题在 v3 上无法复现或用户明确要求旧 API 复现时才切换到旧 API。这一约定保证了新功能与修复都优先沉淀在 v3 上旧 API 仅作为兼容层维护。v3 的用法是hook 手势 GestureDetector 挂载。例如usePanGesture、useTapGesture、useLongPressGesture等 hook 均从react-native-gesture-handler主入口导入——因为主入口 src/index.ts 通过export * from ./v3将 src/v3/index.ts 的全部导出hooks、detectors、组件再导出因此应用代码只需import { GestureDetector, usePanGesture } from react-native-gesture-handler即可使用最新 API。v3 的 hook 全集可在 packages/react-native-gesture-handler/src/v3/hooks 中看到usePanGesture、useTapGesture、useLongPressGesture、useFlingGesture、useHoverGesture、useManualGesture、useNativeGesture、usePinchGesture、useRotationGesture以及组合类 hookuseCompetingGestures、useExclusiveGestures、useSimultaneousGestures。以 usePanGesture.ts 为例其实现会先对 config 做校验__DEV__下执行validatePanConfig再通过useClonedAndRemappedConfig把用户配置映射为内部属性最终交给统一的useGesture完成手势实例创建从而保证各手势 hook 在状态管理与事件分发上共享同一套底层逻辑。detector 层位于 packages/react-native-gesture-handler/src/v3/detectors包含GestureDetector、VirtualGestureDetector、InterceptingGestureDetector及平台分化的HostGestureDetector、NativeDetector、ReanimatedNativeDetector等实现负责把 hook 产生的手势对象真正挂载到视图上并接入平台手势识别。新旧 API 的判别函数在编写涉及平台差异的代码时可以使用usesNativeOrVirtualDetector函数来只包含或只排除 v3 新 API该函数在所有平台上都可用CLAUDE.md。从源码看它定义在 web 端手势基类 GestureHandler.ts 中并被接口 IGestureHandler.ts 声明web 端的NativeViewGestureHandler与GestureHandlerWebDelegate均依据该返回值来决定走原生/虚拟 detector 还是旧路径参见 NativeViewGestureHandler.ts 与 GestureHandlerWebDelegate.ts这正是新旧逻辑共享、按需分流的具体体现。构建检查三端构建命令CLAUDE.md 给出了三个平台的标准构建验证方式全部基于示例应用# Android 构建检查在 apps/basic-example 下执行 cd apps/basic-example yarn android # iOS 构建检查在 apps/basic-example 下执行 cd apps/basic-example yarn ios # macOS 构建检查在 apps/macos-example 下执行 cd apps/macos-example yarn macos这三个命令分别对应各示例应用 package.json 中的脚本android执行react-native run-android、ios执行react-native run-iosapps/basic-example/package.jsonmacos执行npx react-native-macos run-macosapps/macos-example/package.json。注意三者均依赖react-native-gesture-handler: workspace:*的本地引用因此构建的是仓库内最新源码而非 npm 发布版。构建后必须停掉 Metro文档特别强调在 macOS/Linux 上完成任何一次构建后都要停掉 Metro 服务防止端口占用干扰后续构建for pid in $(lsof -ti :8081); do kill $pid; done该命令通过lsof -ti :8081找到监听 8081 端口的进程并逐一 kill当端口没有进程监听时它会被安全地跳过no-op而pkill -f metro这种按进程名匹配的方式并不足够无法覆盖所有占用 Metro 端口的场景。因此每次构建结束后执行上面的循环清理命令是仓库推荐的收尾操作。JavaScript 检查类型、测试与 LintCLAUDE.md 列出了三类 JS 侧质量检查TypeScript 类型检查# 在包目录或仓库根目录执行 yarn ts-check该命令在根 package.json 中定义为yarn workspaces foreach --all --parallel --topological-dev run ts-check会并行执行所有 workspace 的ts-check脚本库包的 package.json 中ts-check为yarn tsc --noEmit yarn tsc -p __typetests__ --noEmit即除常规源码类型检查外还会对typetests目录下的类型测试文件如 buttonEventTest.ts做编译校验确保公开 API 的类型签名可用。Jest 单元测试# 在 packages/react-native-gesture-handler 下执行 yarn test # 也可以直接传入文件名只运行指定测试文件 yarn test hitSlop.test.ts仓库在 packages/react-native-gesture-handler/src/tests下维护了大量测试例如Events.test.tsx、RelationsTraversal.test.tsx、RuntimeBindings.test.ts、api_v3.test.tsx、hitSlop.test.ts、pressableRipple.test.tsx等覆盖事件分发、手势关系遍历、v3 API 行为、hitSlop 计算等关键逻辑修改手势核心代码后建议运行相关测试回归。ESLint 检查yarn lint:js同样通过根目录 workspaces 脚本并行执行库包内 package.json 的lint-js为eslint --ext .js,.ts,.tsx src/ yarn prettier --check ./src/**/*.{js,jsx,ts,tsx}即 ESLint 与 Prettier 格式校验合二为一。代码格式化CLAUDE.md 提供了按平台划分的格式化命令# Apple 平台iOS 与 macOS 共用 yarn format:apple # Android yarn format:android # JavaScript yarn format:js其中format:apple实际调用仓库脚本 scripts/format-cpp.js并指定 glob 为apple/**/*.{h,m,mm,cpp}Android 侧调用 scripts/format-android.jsJS 侧则由prettier --write处理src/**/*.{js,jsx,ts,tsx}见库包 package.json。此外 Android 还提供了lint:android./android/gradlew -p android spotlessCheck -q用于静态格式校验以及circular-dependency-checkmadge 检测循环依赖等补充检查脚本。给开发者的实操清单综合 CLAUDE.md 全文参与本仓库开发的标准工作流可归纳为定位源码Android 改动进 packages/react-native-gesture-handler/androidApple 平台改动进 packages/react-native-gesture-handler/appleweb 改动进 packages/react-native-gesture-handler/src/web注意平台后缀文件名。新功能默认走 v3在 src/v3 下用 hooks GestureDetector实现必要时用usesNativeOrVirtualDetector做新旧分流并确保不破坏 v1/v2 兼容。验证构建分别用apps/basic-example验证 Android/iOS、apps/macos-example验证 macOS构建后执行for pid in $(lsof -ti :8081); do kill $pid; done清理 Metro。运行检查yarn ts-check查类型、yarn test跑 Jest、yarn lint:js过 ESLint。提交前格式化按平台执行yarn format:apple/yarn format:android/yarn format:js。按此清单操作即可在保证新旧 API 兼容的前提下以 v3 为主线高效完成本仓库的开发、构建验证与质量检查。赞分享移动开发UI组件【免费下载链接】react-native-gesture-handlerDeclarative API exposing platform native touch and gesture system to React Native.项目地址https://gitcode.com/gh_mirrors/re/react-native-gesture-handler点击查看免费下载相关推荐react-native-web 开发 Monorepo 源码级指南目录结构、构建测试与发布流程全解析react native web 开发 Monorepo 源码级指南目录结构、构建测试与发布流程全解析 本篇技术指南以仓库根目录 README.md http前端UI组件跨平台react-native-swiper与react-native-gesture-handler集成指南react native swiper与react native gesture handler集成指南 你是否在React Native项目中遇到轮播组件滑动移动开发UI组件React Draggable单元测试覆盖率提升从70%到95%的实践React Draggable单元测试覆盖率提升从70%到95%的实践 一、测试现状分析 React Draggable作为一个轻量级拖拽组件库其核心功能包移动开发UI组件上一篇Repomix Watch 模式实战文件变更自动重新打包的完整指南下一篇Resume Matcher 本地部署与 AI 提供商配置完整指南从 uv 依赖管理到 Docker Compose 实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考