Skip to content

feat(reader): 图片点击全屏查看,支持双指缩放(类微信读书体验) - #668

Open
codedogQBY wants to merge 2 commits into
mainfrom
codex/feat-image-viewer
Open

feat(reader): 图片点击全屏查看,支持双指缩放(类微信读书体验)#668
codedogQBY wants to merge 2 commits into
mainfrom
codex/feat-image-viewer

Conversation

@codedogQBY

Copy link
Copy Markdown
Owner

需求

阅读过程中点击/双击图片 → 全屏查看图片,支持手势放大缩小(微信读书/AnxReader 类似体验)。

实现

  • WebView 层attachTapListener 中新增 imageTarget 分支(img/picture/svg/image/canvas),tap 图片时 preventDefault + stopPropagation 阻止翻页,通过 postToRN('imageTap', { src, alt }) 通知 RN
  • 冲突解决:图片 tap 检查在 interactiveTarget(a/audio/video 等)之前执行,优先级:图片点击 > 翻页;图片不会进入翻页分区判定(37.5%/25%/37.5%)
  • RN 层:新增 ImageViewerModal 全屏查看器
    • 双指缩放(1x-4x,基于 touch 距离比)
    • 拖动识别(区分点按与拖动)
    • 单指点按关闭(未移动且缩放≈1 时)
    • 打开新图片自动重置缩放
  • reader.template.html 与编译产物 reader.html 同步修改

涉及文件

  • packages/app-expo/assets/reader/reader.template.html(+11)
  • packages/app-expo/assets/reader/reader.html(+11,编译产物同步)
  • packages/app-expo/src/hooks/use-reader-bridge.ts(+imageTap 消息)
  • packages/app-expo/src/screens/ReaderScreen.tsx(+onImageTap + Modal 挂载)
  • packages/app-expo/src/components/reader/ImageViewerModal.tsx(新建)

验证

  • selection-note 测试 4 个通过
  • Biome 通过(ReaderScreen 原有告警未新增)

- WebView 捕获图片 tap(img/picture/svg/canvas),阻止冒泡到翻页判定
- 优先级:图片点击 > 翻页,通过 bridge imageTap 消息通知 RN
- 新增 ImageViewerModal:全屏查看、双指缩放 1x-4x、拖动识别、点按关闭
- 打开新图片时重置缩放级别
- reader.template.html 与编译产物 reader.html 同步
- 移除覆盖图片的 Pressable,统一 PanResponder 处理手势
- 放大后单指拖动平移查看细节
- 双击 1x ↔ 2x 切换,单击关闭延迟 280ms 避免抢占双击
- 拖动/缩放后不误关闭,切换图片重置缩放和平移
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant