拓冰网站定制 
移动开发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-handler1.x 文档体系中的LongPressGestureHandler为核心系统讲解长按手势的触发条件、专属与继承属性、事件负载结构并结合仓库内 iOS / Android / Web 三端源码RNLongPressHandler.m、LongPressGestureHandler.kt揭示其底层判定机制。读完本文你将能够熟练配置长按识别参数、正确读取长按事件数据并在新旧两套 API 之间平滑迁移。LongPressGestureHandler 是什么LongPressGestureHandler是一种离散型discrete手势处理器当手指在对应视图上按住足够长的时间后手势即被激活。它有两个鲜明特点手指一旦松开处理器状态会立即进入END参见 state.md 的状态定义如果在最短按住时长minDurationMs之前提前抬起手指或者手指移动距离超过了允许位移maxDist手势将识别失败FAILED不会触发激活。从源码实现看这一处理器在三个平台均有独立实现平台底层实现iOSUILongPressGestureRecognizer的子类RNBetterLongPressGestureRecognizer见 RNLongPressHandler.mAndroid自研的 LongPressGestureHandler.ktWeb基于 JS 事件模拟的 LongPressGestureHandler.ts三端实现共享同一套默认参数minDurationMs 500、maxDist 10、numberOfPointers 1这也是本文后续所有配置讨论的事实基准。专属属性PropertiesLongPressGestureHandler在继承自基础处理器类的全部属性之上完整清单见 common-gh.md额外提供以下三个专属属性。它们同样出现在 TypeScript 类型定义中LongPressGestureHandler.ts 的longPressGestureHandlerProps数组。minDurationMs手指必须保持按在对应视图上的最短时间单位为毫秒。默认值为500。Android 端该默认值定义于 LongPressGestureHandler.kt 的DEFAULT_MIN_DURATION_MS: Long 500iOS 端对应UILongPressGestureRecognizer的minimumPressDuration在 resetConfig 中被重置为0.5秒Web 端同为 DEFAULT_MIN_DURATION_MS 500。从 Android 源码可以看出该参数的核心作用当手指按下并满足指针数量要求后处理器通过Handler.postDelayed({ activate() }, minDurationMs)延迟触发激活LongPressGestureHandler.kt当minDurationMs设为0时则立即激活。iOS 端在updateConfig中将其除以 1000 换算为秒后写入 recognizerRNLongPressHandler.m。maxDist长按期间允许手指移动的最大距离单位为 point点。默认值为10。如果手指移动超过了该距离且处理器尚未激活手势将判定为失败。Android 端默认值定义在 LongPressGestureHandler.kt 的DEFAULT_MAX_DIST_DP 10f并会根据屏幕密度换算为物理像素iOS 端对应allowableMovement默认10RNLongPressHandler.mWeb 端默认值同样为10LongPressGestureHandler.ts。Android 端对位移的判定方式是计算手指相对起始点的距离平方当distSq maxDist * maxDist时若已激活则cancel()否则fail()LongPressGestureHandler.kt。iOS 端则通过translationInView计算位移在shouldCancelGesture中同样用平方距离与allowableMovement²比较RNLongPressHandler.m。numberOfPointers确定完成长按手势所需的手指数量。默认值为1。该属性在原文档正文中未展开但它是源码中确认的第三个专属配置项Android 端默认DEFAULT_NUMBER_OF_POINTERS_REQUIRED 1当currentPointers numberOfPointersRequired时直接fail()LongPressGestureHandler.ktiOS 端映射为numberOfTouchesRequired默认1RNLongPressHandler.m。继承自基础处理器类的通用属性以下属性属于所有手势处理器组件共有的配置详见 common-gh.md在LongPressGestureHandler上同样可用其中部分属性的默认值对长按手势有特殊影响enabled布尔值控制处理器是否分析触摸事件流。设为false时状态永远不会变成ACTIVE若在识别中途更新状态会立即转为FAILED或CANCELLED。默认true。shouldCancelWhenOutside为true时手指离开所连接视图区域即取消或失败。大部分处理器默认false但LongPressGestureHandler和TapGestureHandler默认true。这一点在三端源码中得到一致印证Android 端在init中设置shouldCancelWhenOutside trueLongPressGestureHandler.ktTypeScript 端在createHandler的config中同样写死shouldCancelWhenOutside: trueLongPressGestureHandler.ts。simultaneousHandlers接受一个 ref 或 ref 数组。设置后即使这些处理器处于ACTIVE本处理器也允许激活并且这些处理器激活时不会取消本处理器。参见 interactions.md。waitFor接受一个 ref 或 ref 数组。当所引用的处理器处于BEGAN状态时本处理器不会激活。参见 interactions.md。hitSlop控制视图上可用于开始识别手势的区域。可传负数四边均匀缩减、对象left/right/top/bottom、horizontal/vertical、width/height组合。例如left: 0, width: 20表示仅当从距左边缘 20 点以内起始时才能识别。onGestureEvent处理器处于ACTIVE状态期间每个触摸事件都会触发该回调也可使用Animated.event对象useNativeDriver开启时完全支持。onHandlerStateChange处理器状态变化时触发事件负载与onGestureEvent相同并额外包含oldState变化前的状态。事件数据Event data事件对象在通用负载state、numberOfPointers等见 common-gh.md基础上LongPressGestureHandler还提供以下专属字段。这些字段在 TypeScript 类型LongPressGestureHandlerEventPayload中均有完整定义GestureHandlerEventPayload.ts。x/y指针手指多指时取主导指针当前相对于所连接视图的 X / Y 坐标单位为 point。absoluteX/absoluteY指针当前**相对于根视图窗口的 X / Y 坐标单位为 point。当所连接视图会因手势效果发生变换transform**时建议使用absoluteX/absoluteY代替x/y以避免坐标系被变换干扰。duration长按的持续时间自事件开始起算单位为毫秒。三端实现均实时计算iOS 端由getDuration返回(previousTime - startTime) * 1000RNLongPressHandler.mAndroid 端duration为previousTime - startTimeLongPressGestureHandler.ktWeb 端为Date.now() - this.startTimeLongPressGestureHandler.ts。状态流转与底层判定逻辑理解LongPressGestureHandler的成败判定是正确使用它的关键。从三端源码可以梳理出统一的判定流程1. 手指按下BEGANAndroid 端在首个ACTION_DOWN到来时记录起始坐标startX/startY与startTime并进入BEGAN状态LongPressGestureHandler.kt。2. 按住计时等待激活当指针数量满足numberOfPointersRequired后启动minDurationMs的延迟定时器定时器到期即调用activate()LongPressGestureHandler.kt。3. 提前抬起 → 失败如果定时器未到期就发生ACTION_UP已激活则end()否则fail()LongPressGestureHandler.kt。4. 位移超限 → 失败/取消移动过程中实时计算与起始点的距离平方超过maxDist²时未激活则fail()、已激活则cancel()LongPressGestureHandler.kt。iOS 端在touchesMoved中调用shouldCancelGesture做相同判定RNLongPressHandler.m。5. iOS 的状态映射特例iOS 的UILongPressGestureRecognizer达到minimumPressDuration后首先进入Began状态仓库在state方法中将其直接映射为ACTIVERNLongPressHandler.m因此事件回调中可以依赖nativeEvent.state State.ACTIVE作为长按已触发的判据。完整示例以下示例来自原文档longpress-gh.md展示了最基础的用法——按住 800ms 后弹出提示const LongPressButton () ( LongPressGestureHandler onHandlerStateChange{({ nativeEvent }) { if (nativeEvent.state State.ACTIVE) { Alert.alert(Im being pressed for so long); } }} minDurationMs{800} View style{styles.box} / /LongPressGestureHandler );更完整的实战参考位于仓库示例应用的 multitap 页面apps/common-app/src/legacy/basic/multitap/index.tsx它演示了三个关键点读取duration事件数据通过event.nativeEvent.duration拿到实际长按时长并展示到界面长按与单击/双击的组合外层LongPressGestureHandler包裹两层TapGestureHandler配合waitForref 实现单击、双击、长按三种手势的共存判别统一通过State.ACTIVE分支处理单击、双击回调内均以nativeEvent.state State.ACTIVE作为触发条件与长按的判据保持一致。LongPressGestureHandler onHandlerStateChange{this.onHandlerStateChange} minDurationMs{800} TapGestureHandler onHandlerStateChange{this.onSingleTap} waitFor{this.doubleTapRef} TapGestureHandler ref{this.doubleTapRef} onHandlerStateChange{this.onDoubleTap} numberOfTaps{2} View style{styles.box} / /TapGestureHandler /TapGestureHandler /LongPressGestureHandler注意1.x 的LongPressGestureHandler组件在最新版本中已被标记为deprecatedTypeScript 定义中明确提示将在未来版本中移除请改用Gesture.LongPress()LongPressGestureHandler.ts。新项目建议直接采用 v3 手势 API。迁移到新 APIGesture.LongPress()新版 API 以useLongPressGesturehook 形式提供useLongPressGesture.ts其配置项与旧版组件的映射关系清晰可见LongPressTypes.ts新 API 配置项旧 API 配置项说明minDurationminDurationMs最短按住时长ms默认 500maxDistancemaxDist允许位移point默认 10numberOfPointersnumberOfPointers所需指针数默认 1新 API 同样默认将shouldCancelWhenOutside设为trueuseLongPressGesture.ts与旧版行为保持一致事件负载结构不变仍为x、y、absoluteX、absoluteY、durationLongPressTypes.ts。小结LongPressGestureHandler是 react-native-gesture-handler 中实现按住触发类交互的离散型处理器其行为完全由minDurationMs默认 500ms、maxDist默认 10pt与numberOfPointers默认 1三个参数决定并默认在手指移出视图时取消识别。通过 iOS / Android / Web 三端源码可以看出其核心判定逻辑——按住计时、位移平方距离比较、提前抬起即失败——在三个平台保持严格一致。对于新代码建议直接迁移至Gesture.LongPress()API以获取长期支持与更简练的组合能力。赞分享移动开发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 长按手势指南LongPressGestureHandler 属性、事件数据与源码原理react native gesture handler 长按手势指南LongPressGestureHandler 属性、事件数据与源码原理 本指南聚焦 r移动开发UI组件如何为xi-editor写第一个插件30行Python搞定Echo插件教程如何为xi editor写第一个插件30行Python搞定Echo插件教程 xi editor 是一款后端用 Rust 编写的现代化文本编辑器它支持通过独立移动开发UI组件react-native-gesture-handler 手势事件公共属性全解析state、numberOfPointers 与 pointerTypereact native gesture handler 手势事件公共属性全解析state、numberOfPointers 与 pointerType 本指移动开发UI组件上一篇Coolify 仓库中的 Laravel 最佳实践技能19 类规则体系与源码印证指南下一篇5分钟搞定多系统启动盘Ventoy让你的U盘变身系统百宝箱创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 react-native-gesture-handler 长按手势完全指南：LongPressGestureHandler 属性、事件数据与跨平台实现解析
移动开发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-handler1.x 文档体系中的LongPressGestureHandler为核心系统讲解长按手势的触发条件、专属与继承属性、事件负载结构并结合仓库内 iOS / Android / Web 三端源码RNLongPressHandler.m、LongPressGestureHandler.kt揭示其底层判定机制。读完本文你将能够熟练配置长按识别参数、正确读取长按事件数据并在新旧两套 API 之间平滑迁移。LongPressGestureHandler 是什么LongPressGestureHandler是一种离散型discrete手势处理器当手指在对应视图上按住足够长的时间后手势即被激活。它有两个鲜明特点手指一旦松开处理器状态会立即进入END参见 state.md 的状态定义如果在最短按住时长minDurationMs之前提前抬起手指或者手指移动距离超过了允许位移maxDist手势将识别失败FAILED不会触发激活。从源码实现看这一处理器在三个平台均有独立实现平台底层实现iOSUILongPressGestureRecognizer的子类RNBetterLongPressGestureRecognizer见 RNLongPressHandler.mAndroid自研的 LongPressGestureHandler.ktWeb基于 JS 事件模拟的 LongPressGestureHandler.ts三端实现共享同一套默认参数minDurationMs 500、maxDist 10、numberOfPointers 1这也是本文后续所有配置讨论的事实基准。专属属性PropertiesLongPressGestureHandler在继承自基础处理器类的全部属性之上完整清单见 common-gh.md额外提供以下三个专属属性。它们同样出现在 TypeScript 类型定义中LongPressGestureHandler.ts 的longPressGestureHandlerProps数组。minDurationMs手指必须保持按在对应视图上的最短时间单位为毫秒。默认值为500。Android 端该默认值定义于 LongPressGestureHandler.kt 的DEFAULT_MIN_DURATION_MS: Long 500iOS 端对应UILongPressGestureRecognizer的minimumPressDuration在 resetConfig 中被重置为0.5秒Web 端同为 DEFAULT_MIN_DURATION_MS 500。从 Android 源码可以看出该参数的核心作用当手指按下并满足指针数量要求后处理器通过Handler.postDelayed({ activate() }, minDurationMs)延迟触发激活LongPressGestureHandler.kt当minDurationMs设为0时则立即激活。iOS 端在updateConfig中将其除以 1000 换算为秒后写入 recognizerRNLongPressHandler.m。maxDist长按期间允许手指移动的最大距离单位为 point点。默认值为10。如果手指移动超过了该距离且处理器尚未激活手势将判定为失败。Android 端默认值定义在 LongPressGestureHandler.kt 的DEFAULT_MAX_DIST_DP 10f并会根据屏幕密度换算为物理像素iOS 端对应allowableMovement默认10RNLongPressHandler.mWeb 端默认值同样为10LongPressGestureHandler.ts。Android 端对位移的判定方式是计算手指相对起始点的距离平方当distSq maxDist * maxDist时若已激活则cancel()否则fail()LongPressGestureHandler.kt。iOS 端则通过translationInView计算位移在shouldCancelGesture中同样用平方距离与allowableMovement²比较RNLongPressHandler.m。numberOfPointers确定完成长按手势所需的手指数量。默认值为1。该属性在原文档正文中未展开但它是源码中确认的第三个专属配置项Android 端默认DEFAULT_NUMBER_OF_POINTERS_REQUIRED 1当currentPointers numberOfPointersRequired时直接fail()LongPressGestureHandler.ktiOS 端映射为numberOfTouchesRequired默认1RNLongPressHandler.m。继承自基础处理器类的通用属性以下属性属于所有手势处理器组件共有的配置详见 common-gh.md在LongPressGestureHandler上同样可用其中部分属性的默认值对长按手势有特殊影响enabled布尔值控制处理器是否分析触摸事件流。设为false时状态永远不会变成ACTIVE若在识别中途更新状态会立即转为FAILED或CANCELLED。默认true。shouldCancelWhenOutside为true时手指离开所连接视图区域即取消或失败。大部分处理器默认false但LongPressGestureHandler和TapGestureHandler默认true。这一点在三端源码中得到一致印证Android 端在init中设置shouldCancelWhenOutside trueLongPressGestureHandler.ktTypeScript 端在createHandler的config中同样写死shouldCancelWhenOutside: trueLongPressGestureHandler.ts。simultaneousHandlers接受一个 ref 或 ref 数组。设置后即使这些处理器处于ACTIVE本处理器也允许激活并且这些处理器激活时不会取消本处理器。参见 interactions.md。waitFor接受一个 ref 或 ref 数组。当所引用的处理器处于BEGAN状态时本处理器不会激活。参见 interactions.md。hitSlop控制视图上可用于开始识别手势的区域。可传负数四边均匀缩减、对象left/right/top/bottom、horizontal/vertical、width/height组合。例如left: 0, width: 20表示仅当从距左边缘 20 点以内起始时才能识别。onGestureEvent处理器处于ACTIVE状态期间每个触摸事件都会触发该回调也可使用Animated.event对象useNativeDriver开启时完全支持。onHandlerStateChange处理器状态变化时触发事件负载与onGestureEvent相同并额外包含oldState变化前的状态。事件数据Event data事件对象在通用负载state、numberOfPointers等见 common-gh.md基础上LongPressGestureHandler还提供以下专属字段。这些字段在 TypeScript 类型LongPressGestureHandlerEventPayload中均有完整定义GestureHandlerEventPayload.ts。x/y指针手指多指时取主导指针当前相对于所连接视图的 X / Y 坐标单位为 point。absoluteX/absoluteY指针当前**相对于根视图窗口的 X / Y 坐标单位为 point。当所连接视图会因手势效果发生变换transform**时建议使用absoluteX/absoluteY代替x/y以避免坐标系被变换干扰。duration长按的持续时间自事件开始起算单位为毫秒。三端实现均实时计算iOS 端由getDuration返回(previousTime - startTime) * 1000RNLongPressHandler.mAndroid 端duration为previousTime - startTimeLongPressGestureHandler.ktWeb 端为Date.now() - this.startTimeLongPressGestureHandler.ts。状态流转与底层判定逻辑理解LongPressGestureHandler的成败判定是正确使用它的关键。从三端源码可以梳理出统一的判定流程1. 手指按下BEGANAndroid 端在首个ACTION_DOWN到来时记录起始坐标startX/startY与startTime并进入BEGAN状态LongPressGestureHandler.kt。2. 按住计时等待激活当指针数量满足numberOfPointersRequired后启动minDurationMs的延迟定时器定时器到期即调用activate()LongPressGestureHandler.kt。3. 提前抬起 → 失败如果定时器未到期就发生ACTION_UP已激活则end()否则fail()LongPressGestureHandler.kt。4. 位移超限 → 失败/取消移动过程中实时计算与起始点的距离平方超过maxDist²时未激活则fail()、已激活则cancel()LongPressGestureHandler.kt。iOS 端在touchesMoved中调用shouldCancelGesture做相同判定RNLongPressHandler.m。5. iOS 的状态映射特例iOS 的UILongPressGestureRecognizer达到minimumPressDuration后首先进入Began状态仓库在state方法中将其直接映射为ACTIVERNLongPressHandler.m因此事件回调中可以依赖nativeEvent.state State.ACTIVE作为长按已触发的判据。完整示例以下示例来自原文档longpress-gh.md展示了最基础的用法——按住 800ms 后弹出提示const LongPressButton () ( LongPressGestureHandler onHandlerStateChange{({ nativeEvent }) { if (nativeEvent.state State.ACTIVE) { Alert.alert(Im being pressed for so long); } }} minDurationMs{800} View style{styles.box} / /LongPressGestureHandler );更完整的实战参考位于仓库示例应用的 multitap 页面apps/common-app/src/legacy/basic/multitap/index.tsx它演示了三个关键点读取duration事件数据通过event.nativeEvent.duration拿到实际长按时长并展示到界面长按与单击/双击的组合外层LongPressGestureHandler包裹两层TapGestureHandler配合waitForref 实现单击、双击、长按三种手势的共存判别统一通过State.ACTIVE分支处理单击、双击回调内均以nativeEvent.state State.ACTIVE作为触发条件与长按的判据保持一致。LongPressGestureHandler onHandlerStateChange{this.onHandlerStateChange} minDurationMs{800} TapGestureHandler onHandlerStateChange{this.onSingleTap} waitFor{this.doubleTapRef} TapGestureHandler ref{this.doubleTapRef} onHandlerStateChange{this.onDoubleTap} numberOfTaps{2} View style{styles.box} / /TapGestureHandler /TapGestureHandler /LongPressGestureHandler注意1.x 的LongPressGestureHandler组件在最新版本中已被标记为deprecatedTypeScript 定义中明确提示将在未来版本中移除请改用Gesture.LongPress()LongPressGestureHandler.ts。新项目建议直接采用 v3 手势 API。迁移到新 APIGesture.LongPress()新版 API 以useLongPressGesturehook 形式提供useLongPressGesture.ts其配置项与旧版组件的映射关系清晰可见LongPressTypes.ts新 API 配置项旧 API 配置项说明minDurationminDurationMs最短按住时长ms默认 500maxDistancemaxDist允许位移point默认 10numberOfPointersnumberOfPointers所需指针数默认 1新 API 同样默认将shouldCancelWhenOutside设为trueuseLongPressGesture.ts与旧版行为保持一致事件负载结构不变仍为x、y、absoluteX、absoluteY、durationLongPressTypes.ts。小结LongPressGestureHandler是 react-native-gesture-handler 中实现按住触发类交互的离散型处理器其行为完全由minDurationMs默认 500ms、maxDist默认 10pt与numberOfPointers默认 1三个参数决定并默认在手指移出视图时取消识别。通过 iOS / Android / Web 三端源码可以看出其核心判定逻辑——按住计时、位移平方距离比较、提前抬起即失败——在三个平台保持严格一致。对于新代码建议直接迁移至Gesture.LongPress()API以获取长期支持与更简练的组合能力。赞分享移动开发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 长按手势指南LongPressGestureHandler 属性、事件数据与源码原理react native gesture handler 长按手势指南LongPressGestureHandler 属性、事件数据与源码原理 本指南聚焦 r移动开发UI组件如何为xi-editor写第一个插件30行Python搞定Echo插件教程如何为xi editor写第一个插件30行Python搞定Echo插件教程 xi editor 是一款后端用 Rust 编写的现代化文本编辑器它支持通过独立移动开发UI组件react-native-gesture-handler 手势事件公共属性全解析state、numberOfPointers 与 pointerTypereact native gesture handler 手势事件公共属性全解析state、numberOfPointers 与 pointerType 本指移动开发UI组件上一篇Coolify 仓库中的 Laravel 最佳实践技能19 类规则体系与源码印证指南下一篇5分钟搞定多系统启动盘Ventoy让你的U盘变身系统百宝箱创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考