用途
该技能面向在 React Native Skia 画布上处理触控交互的工程场景。画布可能是任务进度网格、规划器、图表或游戏棋盘,用户期望通过点击、长按、滑动、拖拽或瞄准来操作。技能的核心目标是把这些物理手势收敛到唯一的手势模块,转化为带类型的文本意图(CanvasIntent),再由每个画布表面自己的纯意图函数决定它是否成为领域动作,从而避免多处手势竞争、重复触发和绘制/触控坐标漂移。
主要能力
- 单手势模块:所有画布手势由 src/canvas/gestures/use-canvas-gestures.ts 统一构建,基于 Gesture Handler 的 Gesture.* 构建器(2.x)或 hooks(3.x),要求整个模块一次性迁移,不混用两套 API。
- 基于共享布局的命中测试:使用与渲染器相同的 CanvasLayout 和 HIT_SLOP 调用 hitTest,保证任意画布尺寸下绘制与触摸不漂移,并让边缘点击仍然命中。
- 单意图规则:每次手势最多产生一个意图,在 onEnd 发出(长按在 onStart),不在 onUpdate/onChange 中发出;每次平移都带 onFinalize 重置指针,取消的拖拽不留下预览。
- 纯意图函数:每个表面在自身文件夹中提供 intentToAction(state, intent),显式处理所有意图类型(tap、long-press、swipe、drag-end、aim),对忽略的类型返回 null,仅返回领域单一事实来源接受的动作,不导入 React、React Native、Expo、Skia、store、service、API 或 UI 值。
- 选中状态隔离:点选-再点的选择只作为屏幕 UI 状态保留在模型 hook 中,以 highlight.selected 传入,绝不进入领域状态或动作。
- 拖拽提升:surface.dragLiftPt 在 gesture 层一次性应用,用于悬停、绘制预览和放置目标,意图函数和 draw() 不再额外添加,并保证边缘行可达。
- 物理坐标与 RTL:手势代码不读取书写方向,事件坐标始终保持物理方向,需要镜像的表面在布局层处理,避免 RTL 下坐标二次翻转。
- 触摸目标尺寸:每个可点击区域在最小支持画布上至少为 MIN_TOUCH_PT(默认 44pt,Material 尺寸 Android 为 48),由 hit-targets 测试证明,不靠 hitSlop 修补。
- 系统返回手势避让:读取水平滑动或拖拽的画布,其堆栈屏幕设置 fullScreenGestureEnabled: false,并让画布避开屏幕侧边。
- 无障碍替代方案:仅按住的操作必须提供非按住替代方式,如模式切换或画布无障碍动作。
使用方式
工作流先从 references/input-pipeline.md 读取并确定表面的平移模式(none、swipe、drag、aim;模拟类使用 stick)。若缺少画布套件的 src/canvas/canvas-layout.ts 与 canvas-types.ts,先通过 skia-canvas-rendering 建立套件。随后原样复制 templates/src/canvas/gestures/ 到 src/canvas/gestures/,复制 contracts/canvas-input.json 及其 schema 到 contracts/,替换占位符并列出 buttonComponents,确保 GestureHandlerRootView 位于应用最外层。接着以测试先行方式编写意图函数,参考 progress-grid(点击)、inbox-planner(带提升的拖拽与点选-再点)、sliding-puzzle(滑动)、arena-aim(瞄准)示例,并保留完成态、忽略类型与合法性属性测试。之后编写 hit-targets.test.ts 证明最小触控尺寸与拖拽边缘可达,接线屏幕的模型 hook 调用 useCanvasGestures 并分发非空动作,设置堆栈屏幕手势选项。运行 Jest 测试、eslint、prettier 与 typecheck,执行 node ${CLAUDE_SKILL_DIR}/scripts/check-canvas-input.mjs . 直到输出 RESULT: PASS,最后在具名 iOS 模拟器与 Android 模拟器上真实触摸验证边缘点击、边缘拖拽、中途取消、点选-再点、RTL 区域、屏幕边缘滑动以及 VoiceOver/TalkBack 替代操作。
适用场景
适用于使用 Skia 画布且需要触控交互的 React Native 应用,例如任务进度网格、收件箱规划器、滑动拼图、竞技场瞄准类游戏、图表或棋盘类界面。也适用于需要统一手势入口、保证命中测试与绘制一致、隔离选中 UI 状态、满足触控目标无障碍尺寸、处理 RTL 与系统返回手势冲突的项目。
限制
技能依赖 Gesture Handler 版本与 Expo SDK 的绑定关系,2.x 构建器与 3.x hooks 不能混用,升级时必须整体迁移手势模块。技能不提供具体业务规则、UI 视觉设计或性能基准;手势回调调用的函数必须是 worklet 模块,普通模块在设备 UI 线程会抛错。连续值需在进入状态前量化为整数,游戏模拟使用整数摇杆命令。所有可点击区域大小必须通过调整布局满足最小触控尺寸,不能修改测试或使用 hitSlop 替代。资料未提供该技能包的收费信息、价格或商业授权条款。