移动开发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-gesture-handler 仓库内置了一套完整的示例应用Example App它以单屏示例列表的形式集中展示库中绝大多数手势能力是理解该库声明式手势 API 的最佳实践入口。本文以仓库当前实际结构为准完整讲解示例应用的组成、本地运行步骤克隆、依赖安装、启动 Metro 与构建 Android/iOS、通过 Expo 运行的方式并结合仓库源码剖析示例列表的组织结构与导航实现让你能快速搭建并逐个体验 Pan、Pinch、Rotation、Fling、LongPress、Hover 等手势的真实效果。示例应用是什么示例应用是仓库中一个普通的 React Native 应用其代码集中放在仓库的apps/目录下旧版本文档中对应Example/目录随着仓库迁移至 monorepo 结构后已更名为apps/下文会详细说明。它承担两个职责展示 Gesture Handler 库的大部分功能覆盖从基础手势拖拽、点击、轻扫到复杂组合场景底部抽屉、聊天头、相机滤镜、嵌套按压的全部示例作为回归测试与交互验证平台示例列表中包含大量Tests测试条目用于验证嵌套手势、事件取消、指针类型等边界行为。应用由一组单屏示例构成主界面是一个可搜索、可分组的手势示例列表点击任意条目即可进入对应的手势演示页面。从源码结构看每个示例都位于apps/common-app/src/下独立的文件夹中例如 new_api/simple/tap、new_api/showcase/bottom_sheet与旧文档每个示例位于独立文件夹的描述完全一致。示例应用在当前仓库中的布局进入仓库根目录后可以看到示例应用相关的工程全部位于 apps 目录下共包含四个入口工程目录说明apps/basic-example基础示例工程只依赖react-native-gesture-handler一个库不引入 Reanimated、SVG 等其它包最便于确认手势库本身是否正常工作apps/common-app共享示例源码包几乎所有示例页面都定义在这里被其它示例工程复用apps/expo-example基于 Expo 的示例工程用于通过 Expo 生态运行示例apps/macos-example面向 macOS 平台的示例工程其中common-app是核心。它通过 App.tsx 使用react-navigation/stack构建导航主界面MainScreen以分组列表形式渲染示例条目而示例注册表则分别定义在两个文件中新版 API 示例new_api/index.tsx 中导出NEW_EXAMPLES旧版legacyAPI 示例legacy/index.tsx 中导出OLD_EXAMPLES两个注册表都遵循统一的ExamplesSection结构sectionTitle分组名 data示例数组每个示例含name、component及可选的unsupportedPlatforms该类型定义在 common.tsx 中。unsupportedPlatforms字段会决定某个示例在当前平台上是否可点击——例如Context Menu在 Android/iOS/macOS 上会显示为不可用仅支持 Web。通过 Expo 运行如果只想快速体验可以使用 Expo 方式运行示例应用。当前仓库中对应的工程是 apps/expo-example它的package.json提供了以下脚本start: expo start --dev-client, android: expo run:android, ios: expo run:ios, web: expo start --web进入apps/expo-example后执行yarn start即可启动 Expo 开发服务器--dev-client表示使用开发客户端模式。需要说明的是发布到 Expo 的版本通常不是最新代码仓库维护者一般只在 Expo SDK 发布新版本时同步更新线上 Snack 示例如果你想体验最新的示例例如包含最新版手势 API 的改动更可靠的方式是按下面章节在本地完整运行示例应用。在本地运行示例应用本地运行能保证你拿到的是与仓库源码完全同步的最新版本。整个过程分为环境准备、克隆仓库、安装依赖、启动开发服务器、构建平台应用五个阶段。前置环境准备示例应用本质是一个常规 React Native 应用因此首先需要按 React Native 官方的环境搭建步骤确保你的机器上已安装以下工具Node.js示例工程要求node 22.11.0见 apps/basic-example/package.json 的engines字段Yarn仓库使用 Yarn Workspaces 管理多包依赖Android SDK 与模拟器运行 Android 时Xcode 与 iOS 模拟器运行 iOS 时与旧版文档要求全局安装react-native-cli不同当前仓库已将react-native-community/cli及其平台插件作为工程的devDependencies声明同样见 apps/basic-example/package.json因此本地构建不再依赖全局 CLI只需保证仓库依赖安装完整即可。第一步克隆仓库git clone https://gitcode.com/gh_mirrors/re/react-native-gesture-handler.git第二步在仓库根目录安装依赖示例应用通过react-native-gesture-handler: workspace:*引用本仓库的库源码见 apps/basic-example/package.json因此必须在仓库根目录执行一次依赖安装Yarn 会把各 workspace 的依赖一并解析并建立符号链接cd react-native-gesture-handler/ yarn这一步同时会安装库本身的依赖以及apps/basic-example、apps/common-app等所有 workspace 的依赖。第三步进入示例工程以最精简的basic-example为例cd apps/basic-example如果你需要体验完整示例集含 Reanimated 动画、SVG 等联动场景应使用apps/common-app所在的宿主工程而basic-example刻意只依赖手势库本身便于隔离验证。两者依赖安装方式相同。第四步启动 Metro 开发服务器yarn start该命令等价于react-native start见 apps/basic-example/package.json 中scripts.start会启动 Metro Bundler 并等待设备连接。第五步构建并启动应用Android保持yarn start运行另开一个终端执行yarn android等价于react-native run-android会完成构建、安装并自动在已连接的设备或模拟器上启动应用。也可以通过 Android Studio 打开 apps/basic-example/android 直接运行。iOS首次运行 iOS 前需要先安装 CocoaPods 依赖。进入 iOS 目录执行cd apps/basic-example/ios pod install然后返回apps/basic-example执行yarn ios等价于react-native run-ios。也可以直接用 Xcode 打开 apps/basic-example/ios/BasicExample.xcworkspace 运行。运行前请确保已有 Android/iOS 真机或模拟器处于连接状态。四个示例工程basic-example、common-app宿主、expo-example、macos-example的package.json中均定义了相同的android/ios/start脚本运行方式完全一致。示例列表里都有什么启动后进入主界面你会看到一个带搜索框和分组标题的示例列表。当前默认展示的是新版 API 示例NEW_EXAMPLES共分为六大类分组示例Simple Gestures简单手势Basic Fling、Basic Tap、Basic LongPress、Basic Hover、Basic Pinch、Basic Rotation、Basic PanShowcase展示State Manager、Svg、Nested Text、Shared Value、Bottom Sheet、Overlap、Animated、TimerHover and mouse悬停与鼠标Stylus Data、Context Menu、Hover Positioning、Hoverable Icons、Mouse ButtonsComplicated复杂场景Lock、Velocity Test、Chat Heads、Camera、TransformationsComponents组件FlatList、ScrollView、Buttons、Button underlay、Touchable、Touchable stress test、Switch TextInput、Reanimated Swipeable、Reanimated Drawer LayoutTests测试RectButton、Two Finger Trackpad Pan、Web Styles Reset、Pointer Type、Reattaching、Modal with Nested Root View、Nested pressables、Nested touchables、Pressable、RN responder cancellation、Keyboard Should Persist Taps分组与条目的完整清单见 new_api/index.tsx 的NEW_EXAMPLES定义。每个分组恰好对应一类手势能力Simple Gestures是学习每种基础手势 API 的起点Showcase演示手势与 Reanimated 结合的下拉抽屉、聊天头、共享值动画等组合效果Hover and mouse面向 Web/桌面端的悬停、鼠标按键与手写笔数据Complicated覆盖锁屏式手势判定、速度测试、相机滤镜等进阶场景Components展示库提供的ReanimatedSwipeable、ReanimatedDrawerLayout等现成组件与 FlatList/ScrollView 的联动Tests则专门用于验证嵌套手势、事件取消等已知边界问题例如旧版文档中提到的 Nested Touchables - issue #784、Views overflowing parents - issue #1532 等回归场景。如何查看旧版legacyAPI 示例在 App.tsx 的主界面顶部设置区提供了两个开关Open last example on launch开启后应用会记住你上次进入的示例下次启动时直接打开Show legacy version examples开启后列表切换为旧版 API 示例OLD_EXAMPLES包含 Basic examples、Recipes、Showcase、Release tests、Simple 等分组可用于对比新旧两代手势 API 的写法差异。旧版示例清单见 legacy/index.tsx。主界面的搜索与导航实现从源码看主界面 MainScreen 使用ListWithHeader见 ListWithHeader.tsx渲染分组列表并提供两个实用能力搜索过滤输入关键字后filteredSections会按示例名称做不区分大小写的包含匹配实时过滤分组内容无匹配时显示 No examples match 提示。动态注册路由Stack.Screen通过(showLegacyVersion ? OLD_EXAMPLES : NEW_EXAMPLES).flatMap(...)动态注册每个示例页面因此切换版本开关后导航栈会随之重建为对应版本的示例集。这也印证了旧文档中应用由单屏示例列表构成、每个示例独立成文件夹的架构描述。运行中可能遇到的问题依赖未装全导致workspace:*解析失败react-native-gesture-handler在示例工程中被声明为workspace:*依赖若跳过根目录的yarn直接进入apps/basic-example安装会因找不到本地库包而报错。务必先在仓库根目录执行一次yarn。iOS 缺少 PodsiOS 工程的依赖通过 CocoaPods 管理见 Podfile首次运行前必须执行pod install否则yarn ios会因缺少原生依赖而构建失败。示例在部分平台不可用部分示例声明了unsupportedPlatforms例如Context Menu仅支持 Web、Two Finger Pan在 Android/macOS 上不可用这些条目在列表中会以灰色禁用态显示属于预期行为并非运行异常。想体验最新代码仓库中任何本地运行方式拿到的都是当前源码的最新状态只有在线发布的 Expo Snack 版本可能滞后于仓库进度如对版本敏感请优先本地运行。小结示例应用是 react-native-gesture-handler 最直观的学习与验证工具先git clone仓库再在根目录yarn完成 workspace 依赖安装进入apps/basic-example后分别用yarn startyarn android/yarn ios即可在设备或模拟器上运行iOS 首跑需额外pod install。完整的六大类新版示例与旧版示例均可在apps/common-app/src/下按文件夹逐一阅读源码无论是入门学习每种基础手势还是排查嵌套手势等边界问题这套示例工程都能提供一手且可直接运行的参考实现。赞分享移动开发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点击查看免费下载相关推荐Deep-Live-Cam 快速上手教程3 步搞定摄像头与视频换脸的完整指南Deep Live Cam 快速上手教程3 步搞定摄像头与视频换脸的完整指南 如果你在深夜开播前想把摄像头里自己的脸换成某个角色又不想等导出、不想写代码移动开发UI组件电费到底花哪了Home Assistant 家庭能源管理一篇就够电费到底花哪了Home Assistant 家庭能源管理一篇就够 上个月电费 487 元空调单独贡献了多少没人答得上来。用 Home Assistant文档教程智能家居物联网FastAPI-MVC依赖管理使用Poetry和UV构建可靠的Python环境FastAPI MVC依赖管理使用Poetry和UV构建可靠的Python环境 FastAPI MVC是一款专注于提升开发者生产力的工具旨在帮助构建高质量、上一篇番茄小说下载器终极指南5种格式永久保存你的阅读时光下一篇Sunshine 游戏串流实战指南30 分钟搭起自托管 Moonlight 串流主机创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考