feat(reader): 图片点击全屏查看,支持双指缩放(类微信读书体验) - #668
Open
codedogQBY wants to merge 2 commits into
Open
Conversation
- WebView 捕获图片 tap(img/picture/svg/canvas),阻止冒泡到翻页判定 - 优先级:图片点击 > 翻页,通过 bridge imageTap 消息通知 RN - 新增 ImageViewerModal:全屏查看、双指缩放 1x-4x、拖动识别、点按关闭 - 打开新图片时重置缩放级别 - reader.template.html 与编译产物 reader.html 同步
- 移除覆盖图片的 Pressable,统一 PanResponder 处理手势 - 放大后单指拖动平移查看细节 - 双击 1x ↔ 2x 切换,单击关闭延迟 280ms 避免抢占双击 - 拖动/缩放后不误关闭,切换图片重置缩放和平移
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
需求
阅读过程中点击/双击图片 → 全屏查看图片,支持手势放大缩小(微信读书/AnxReader 类似体验)。
实现
attachTapListener中新增imageTarget分支(img/picture/svg/image/canvas),tap 图片时preventDefault + stopPropagation阻止翻页,通过postToRN('imageTap', { src, alt })通知 RNinteractiveTarget(a/audio/video 等)之前执行,优先级:图片点击 > 翻页;图片不会进入翻页分区判定(37.5%/25%/37.5%)ImageViewerModal全屏查看器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(新建)验证