一、 全局前端架构与技术栈选型

• 核心框架： React Native (推荐使用 Expo 框架，极大简化原生模块配置与打包流)

• 路由管理： React Navigation (推荐使用 @react-navigation/native-stack 处理全屏抽卡跳转，使用 createBottomTabNavigator 处理底部导航)

• 状态管理： Zustand (轻量且高性能，非常适合管理用户五行状态、打卡记录与暗黑主题)

• 核心动效引擎： react-native-reanimated (v3) (用于所有弹簧物理动画、3D翻转、手势交互)

• 高性能渲染引擎： @shopify/react-native-skia (极其重要！用于替代 Web 端的 Canvas，实现极高帧率的星海粒子特效与流体能量球)

• 复杂动画插值： lottie-react-native (用于加载小女巫的复杂卡通动效)

• 触觉反馈： expo-haptics (配合抽卡、敲击电子木鱼等交互，提供震动反馈)

二、 核心页面结构与特效实现指南

0. 迎新与灵境档案 (Onboarding)

• 页面定位： 应用冷启动入口，用户信息采集与分流。

• UI 组成： * 星空背景容器。
• 基础信息录入表单（年月日时、地点）。
• 【灵魂勘测】分流弹窗（毛玻璃质感）。

• 特效与技术栈标注：
• 星空背景： 使用 expo-linear-gradient 叠加 @shopify/react-native-skia 绘制缓慢移动的星轨点阵。
• 组件入场： 使用 react-native-reanimated 的 FadeIn 和 SlideInDown 实现卡片的丝滑上浮入场。

1. 首页：今日罗盘 (Dashboard)

• 页面定位： 登录后首屏（Main Tab 1），展示核心状态与抽卡入口。

• UI 组成：
• 顶部 NavBar：左侧 Avatar（点击跳转路由）、中间 Title、右侧商城 Icon。
• 主视觉区（可点击切换）：
• 状态 A：星核勘测（外围轨道 + 中心星座）。
• 状态 B：五行女巫（迪士尼卡通形象 + 动态环境）。
• 数据折线图（灵魂勘测用户可见）。
• 底部悬浮按钮：“开启命运塔罗”。

• 特效与技术栈标注：
• 星核流体与轨道： 放弃原生 View 的 borderRadius 拼接，直接使用 @shopify/react-native-skia 绘制矢量轨道和流体渐变（Shader），确保多轨旋转时不掉帧。
• 状态切换 (Shared Element Transition)： 使用 react-native-reanimated 处理星核到小女巫的 Layout Animation（缩放与透明度渐变）。
• 女巫动效： 设计师使用 AE 导出 JSON，前端使用 lottie-react-native 进行播放控制。
• 运势波动图： 使用 victory-native 或 react-native-svg 绘制带有赛博朋克渐变发光色的平滑曲线 (Bezier Curve)。

2. 命运塔罗 (Destiny Tarot)

• 页面定位： 沉浸式全屏抽卡与任务打卡页（通过 Stack Navigator 的 presentation: 'modal' 或 fullScreenModal 弹出）。

• UI 组成：
• 全屏背景图（抽卡前为星云，抽卡后为塔罗牌大图背景）。
• 3D 塔罗牌组件。
• 任务详情蒙版（包含毛玻璃与文字）。
• 左下角 1/4 圆弧操作区（待结束/已完成）。
• 相册/相机调起弹窗。

• 特效与技术栈标注：
• 海克斯开箱特效 (核心)： 重点使用 react-native-reanimated。利用 useAnimatedStyle 结合 withSpring 配置弹簧物理参数，通过修改 transform: [{ rotateY: ... }, { scale: ... }] 实现 3D 狂转几圈后放大居中的极强视觉冲击力。
• 毛玻璃蒙版： 使用 expo-blur 的 <BlurView> 覆盖在卡牌图层之上。
• 拍照与图片选取： 集成 expo-camera 和 expo-image-picker 获取用户本地打卡图片。
• 扇形按钮形态变化： 使用 Reanimated 对按钮的 backgroundColor 和 borderRadius 进行带阻尼的过渡动画。

3. 个人星轨 (Profile & NFT Showcase)

• 页面定位： 用户的社交展示面与“数字手账”藏品馆。

• UI 组成：
• 顶部个人数据面板（等级、星光值、标签）。
• 双列瀑布流藏品馆（按系列分类的 Tab 切换）。
• 卡片单元格（隐约透出用户打卡照片，带星级标识）。

• 特效与技术栈标注：
• NFT 瀑布流列表 (核心性能点)： 绝对不要使用 React Native 原生的 FlatList 渲染大量图文卡片。强烈建议使用 @shopify/flash-list 配置 numColumns={2}，这能让你在展示几百张精美的塔罗/NFT 卡牌时依然保持极其流畅的滑动体验。
• 卡片点击放大： 点击列表中的卡片，使用 React Navigation 的 Shared Element Transition (共享元素动画) 或自定义 Reanimated 动画，让小卡片无缝放大过渡到【命运塔罗】的全屏详情页，体验直接拉满。

4. 疗愈空间 & 灵犀指引 (工具与 AI Tab)

• 页面定位： Main Tab 2 & 3，沉淀用户时长与商业变现。

• UI 组成：
• 电子木鱼/白噪音播放器。
• 类似微信/主流 AI App 的对话聊天流。

• 特效与技术栈标注：
• 音频与震动： 核心依赖 expo-av (无延迟音频播放) 和 expo-haptics (敲击反馈)。
• 对话流打字机效果： 在渲染聊天气泡时，前端维护一个逐字递增的 State 或配合后端的 SSE (Server-Sent Events) 流式请求进行增量渲染。可以使用 react-native-gifted-chat 作为基础 UI 底座进行深度魔改。