示例功能
学习 Todos、上传示例、推荐、权限和账号示例。
应用里带着几组可替换的示例界面。它们的目的不是替你定义产品，而是展示 这套模板的写法：路由、Supabase、TanStack Query、权限、账号设置和反馈。 熟悉之后，你可以保留服务模块、替换界面，或者直接删除演示。
用户从哪里进入
| 界面 | 路由 | 标签 | 用途 |
|---|---|---|---|
| 首页 | app/(tabs)/index.tsx | Integrated | 产品介绍、技术栈标签、授权卡片、分类入口和演示卡片 |
| 侧边抽屉 | app/(tabs)/_layout.tsx | Integrated | 快速进入 Component、Showcase、Todos、上传、推荐和账号路由 |
| Todos | app/todos.tsx | Example | Supabase CRUD 参考功能 |
| 上传示例 | app/upload-sample.tsx | Example | Supabase Storage 上传参考流程 |
| 推荐 | app/refer.tsx | Example | 分享深层链接，并记录评分触发事件 |
| 权限 | app/permissions.tsx | Integrated | 在系统弹窗前解释并请求原生权限 |
| 个人资料 | app/profile.tsx | Integrated | 资料编辑、头像上传、语言和主题 |
| 账号与安全 | app/account-security.tsx | Integrated | 邮箱、密码、生物识别锁、会话和删除账号 |
| Me 标签页 | app/(tabs)/me.tsx | Integrated | 登录后的设置中心 |
首页
首页是模板的第一个产品界面。它展示 React Native、Expo、Supabase、 RevenueCat、PostHog、Sentry、NativeWind、TypeScript、i18n 和主题等技术栈， 然后提供三类入口：
- 授权卡片：免费用户进入
/home-paywall，当useEntitlement().isEntitled为 true 时进入/manage-subscription。 - What's inside：六个分类卡片，都进入 Showcase 标签页。
- Demos：Components、Todos 和 Upload sample 三张演示卡片。
首页没有直接导入 lib/showcase 的 catalog，而是保留了一份本地分类列表。
这样即使以后删除 Showcase 演示目录，核心首页仍然可以保留。
Todos
app/todos.tsx 是数据功能参考。它展示了：
- 通过登录用户 ID 绑定 Supabase 行数据。
- TanStack Query 无限分页，页大小为 20。
- all、active、completed 三个过滤器。
- 新增、切换完成、行内编辑、删除、清理已完成、上下重排。
- mutation 后更新 Query 缓存，重排失败时回滚。
- 下拉刷新、加载更多、友好的网络错误和 toast 反馈。
可以按这个顺序创建你的第一个真实功能：
创建表
添加 Supabase migration，并用 auth.uid() 写好 RLS 策略。
把数据访问放进 lib/
Todos 为了示例紧凑，把 query 函数留在 screen 里。真实产品功能更建议新建
类似 lib/projects.ts 的模块。
根据 Query 状态渲染
使用 queryKeys、useQuery 或 useInfiniteQuery、乐观缓存更新，以及
toNetworkFriendlyMessage() 输出给用户看的错误。
上传示例
app/upload-sample.tsx 是一个需要登录的 Storage 示例。它用
expo-document-picker 选择多个文件，通过 expo-file-system 读取字节，
用 XHR 直接上传到 sample-uploads bucket 并显示进度，最后插入
sample_uploads 元数据行。
路径格式是：
sample-uploads/<user-id>/<timestamp>-<random>-<safe-file-name>step7_examples migration 会创建 bucket、sample_uploads 表和按用户目录
隔离的 storage policy，不需要手动建 bucket。
个人资料和账号
Profile 展示账号资料写法：
- 通过
useProfile().uploadAvatar上传头像。 - 编辑
full_name、bio、phone、location。 - 语言选择器由
I18nProvider驱动。 - 主题选择器由
ThemePreferenceProvider驱动。 - 选择头像前，如果没有相册权限，会跳到
/permissions。
Account & Security 展示敏感账号流程：
- 修改邮箱，并用 OTP 验证。
- 修改密码，表单使用
react-hook-form和 zod。 - 当设备支持并已录入时，开启生物识别应用锁。
- 登出其他会话。
- 通过
delete-accountSupabase Edge Function 删除账号。
Apple 审核要求应用内可以删除账号。发布前请保留这条路径，或者替换为等价 流程。
推荐和评分
app/refer.tsx 用 createAppLink("/") 生成邀请链接，打开原生分享面板，
并记录 referral_shared 评分触发事件。模板没有内置推荐后台。可以把它当
作增长功能示例，然后用你自己的邀请码、归因或奖励逻辑替换
lib/referrals.ts。
权限预热
app/permissions.tsx 有四张权限卡片：
| 权限 | 模块 | 平台说明 |
|---|---|---|
| 通知 | lib/notifications.tsx | 真实 Expo push token 需要真机 |
| 相册 | expo-image-picker media library permission | 选择头像前使用 |
| 相机 | expo-image-picker camera permission | 为拍摄功能预留 |
| 跟踪 | lib/tracking-permissions | iOS ATT 弹窗；Web fallback 为 no-op |
每张卡先展示当前状态和用途，再打开系统权限弹窗。相比冷启动一次性请求权限， 这种方式更利于审核和转化。
替换或删除演示
- 加入产品主数据模型后，可以替换 Todos。
- 如果产品不需要任意文件上传，可以删除 Upload sample。
- 如果用到了通知、相册、相机或 ATT，建议保留 Permissions。
- 除非你要替换认证模型，否则建议保留 Profile、Account & Security 和 Me。
- 如果要删除演示目录，但保留真实功能，请按 Showcase 页的删除步骤操作。