---
id: survey-app-shell
name: 应用外壳与折叠屏布局
area: rn-app
status: done
---

## 概述

React Native (Expo SDK 52 + Expo Router) 应用骨架，实现 Z Fold 6 折叠/展开双形态布局切换。折叠时单栏显示，展开时左侧地图 + 右侧表单双栏并排。底部导航含「登记」「汇总」「设置」三个 Tab。

## 任务卡

### ✅ Expo 应用骨架初始化
- status: done
- complexity: M
- files: apps/property-survey/app.json, apps/property-survey/package.json, apps/property-survey/app/_layout.tsx, apps/property-survey/app/index.tsx, apps/property-survey/app/summary.tsx, apps/property-survey/app/settings.tsx
- depends: local-data-layer
- acceptance: `pnpm --filter property-survey start` 能启动；底部导航在「登记」「汇总」「设置」三个页面间切换；根布局包裹 CategoriesProvider；SQLite 数据库在启动时完成初始化

### ✅ 折叠屏状态感知 Hook
- status: done
- complexity: S
- files: apps/property-survey/src/layout/useFoldState.ts
- acceptance: useFoldState 返回 `{ isUnfolded: boolean, windowWidth: number }`，以 720px 为断点区分折叠/展开状态，useWindowDimensions 变化时自动更新

### ✅ 双栏/单栏自适应布局容器
- status: done
- complexity: M
- files: apps/property-survey/src/layout/FoldableLayout.tsx
- depends: survey-app-shell
- acceptance: 展开时渲染左右两栏（左侧 flexGrow:1 地图区，右侧 260px 详情区动画展开）；接受 `left` `right` `showDetail` 三个 prop；`showDetail` 控制右侧面板以 `LayoutAnimation.configureNext` 动画展开/收起（替代 JS 线程 Animated.timing，解决 Android 地图渲染空白及卡顿）；折叠时只渲染左侧

### ✅ 楼层切换标签组件
- status: done
- complexity: S
- files: apps/property-survey/src/layout/FloorTabs.tsx
- depends: survey-app-shell
- acceptance: 显示 1F / 2F / 3F / 楼顶 四个标签；选中项高亮；onChange 回调传出当前楼层数字（1/2/3/4）

### ✅ 查看/编辑模式切换
- status: done
- complexity: S
- files: apps/property-survey/app/index.tsx
- depends: survey-app-shell
- acceptance: 顶栏左侧显示「查看 | 编辑」分段控件；查看模式下右侧面板渲染 MarkerPhotoPanel，编辑模式下渲染 ItemFormSheet；无选中标记时右侧面板为空（showDetail=false，动画收起）；默认为编辑模式

### ✅ 查看模式照片面板集成
- status: done
- complexity: S
- files: apps/property-survey/app/index.tsx
- depends: photo-capture
- acceptance: 选中标记点且处于查看模式时，showDetail=true，右侧面板渲染 MarkerPhotoPanel；切换楼层或模式时自动清空 selectedMarker