lanrtop/react-phone-apps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
3dbc6f0ff5
react-phone-apps/.blueprint/modules/photo-capture.md
lanrtop 3dbc6f0ff5 refactor: 标记点序号显示、布局叠加方式及照片选择器重构 
- 标记点角标从物品数量改为按楼层顺序编号，角标背景色跟随标记颜色
- FoldableLayout 改为绝对定位叠加布局，移除 LayoutAnimation（解决 Android 地图渲染空白及卡顿）
- PhotoPicker 拆分为拍照/选图两个独立按钮；选图改用 expo-document-picker 绕过三星 Photo Picker 崩溃问题
- AndroidManifest 移除手动 FileProvider 声明（改由 Expo 插件自动注入）
- 同步更新蓝图文档：新增 category-management 模块、补全各模块已完成任务卡

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-10 02:17:34 +09:00

3.2 KiB
Raw Blame History

id name area status
photo-capture 照片采集与管理 rn-app done

概述

调用设备摄像头或相册为物品条目添加多张照片，照片存储到 App 专属目录，路径写入 SQLite photos 表。支持 Android 13+ 权限模型（CAMERA + READ_MEDIA_IMAGES + FileProvider）。

任务卡

✅ 摄像头调用与照片存储

  • status: done
  • complexity: M
  • files: apps/property-survey/src/features/photo/usePhotoCapture.ts, apps/property-survey/src/features/photo/PhotoPicker.tsx
  • depends: local-data-layer
  • acceptance: 使用 expo-image-picker（MediaType.Images，已从废弃的 MediaTypeOptions 迁移）；「拍照」和「从相册选择」两种入口；Alert 关闭后延迟 300ms 启动，避免与系统权限弹窗冲突；照片复制到 App 专属目录（expo-file-system）；调用 insertPhoto 写入数据库；有权限检查

✅ Android 权限与 FileProvider 配置

  • status: done
  • complexity: S
  • files: apps/property-survey/android/app/src/main/AndroidManifest.xml, apps/property-survey/android/app/src/main/res/xml/file_paths.xml, apps/property-survey/app.json
  • acceptance: AndroidManifest 声明 CAMERA + READ_MEDIA_IMAGES 权限（兼容 Android 13+）；配置 FileProvider（android:authorities="${applicationId}.provider"）支持相机临时文件 URI；app.json 中 expo-image-picker 插件配置中文权限说明

✅ 照片网格预览与删除（物品表单内）

  • status: done
  • complexity: M
  • files: apps/property-survey/src/features/photo/PhotoGrid.tsx
  • depends: photo-capture
  • acceptance: 3 列网格展示已添加的照片缩略图；点击照片全屏预览（FlatList + pagingEnabled + getItemLayout，使用 useWindowDimensions 实时宽度计算每页偏移）；全屏预览顶部有「保存到相册」按钮（expo-media-library，保存后显示"已保存"提示）；长按照片显示「删除」确认弹窗，删除时同步调用 deletePhoto（含文件系统删除）；末尾显示「+」按钮触发 PhotoPicker

✅ 查看模式照片面板（MarkerPhotoPanel）

  • status: done
  • complexity: M
  • files: apps/property-survey/src/features/photo/MarkerPhotoPanel.tsx
  • depends: photo-capture
  • acceptance: 查看模式下右侧面板；按物品分组展示照片缩略图（4 列网格 + 物品名标题）；点击缩略图全屏 Modal 预览；Modal 为非透明全屏黑底（解决 Android transparent Modal 仅覆盖父容器的问题）；单张显示 + onTouchStart/End 手势滑动切换（≥50px 触发）+ 左右箭头按钮；计数器实时同步

决策记录

  • 照片预览放弃 ScrollView/FlatList pagingEnabled：在 Android 上 transparent Modal 的渲染范围被限制在父组件（右侧 260px 面板）内而非全屏，导致 pagingEnabled 页宽与实际视口不匹配，两张照片始终并排显示。尝试多种宽度测量方案（SCREEN_W 静态值、onLayout 动态测量、useWindowDimensions）均无效。最终改为单张显示 + 原生 Touch 事件手势，彻底绕开分页宽度问题。
  • Modal 去掉 transparent prop：transparent={true} 在 Android 上使 Modal 继承父容器的渲染上下文（右侧面板），只遮盖面板区域而非全屏。改为非透明 Modal + 黑色背景，强制创建独立原生全屏窗口。