📱 NFT Marketplace App

项目代号: NFT-Expo-V1

当前版本: 1.0.0 (MVP)

技术栈: React Native (Expo), TypeScript, Zustand, Reanimated

更新日期: 2026/01/16

📎 项目链接

https://github.com/ashlandy79/MobileNftMarket

1. 项目概览 (Overview)

1.1 产品愿景

1.2 核心用户体验目标

• 沉浸式视觉: 全局使用深色红黑渐变背景，配合毛玻璃 (Blur) 元素，营造高端质感。

• 丝滑交互: 抛弃生硬的跳转，使用手势操作、卡片堆叠滑动、页面平滑过渡。

• Web3 无感集成: 状态管理与钱包连接状态深度绑定，提供流畅的资产查看体验。

2. 技术架构与规范 (Tech Stack & Standards)

2.1 核心依赖库

2.2 全局设计规范 (Design System)

• 背景色: Linear Gradient (#2A1010 -> #0F0505)

• 强调色: #FF0000 (用于按钮、心形图标、高亮文本)

• 字体颜色: Primary (#FFFFFF), Secondary (#A0A0A0)

• 间距规范: 全局左右 Padding 默认为 24px

3. 路由与目录结构 (Router Structure)

4. 页面详细功能说明 (Page Specifications)

4.1 引导页 (Onboarding / Welcome)

• 路由: /app/(auth)/welcome.tsx

• 功能描述:
• 展示 App 核心品牌图/Slogan ("Exclusive Digital Collectibles")。
• "Get Started" 按钮，点击后根据登录状态跳转至首页。

• 开发要点:
• 全屏背景图。
• 使用 router.replace('/(tabs)') 防止用户返回。

4.2 首页 / 探索 (Home / Discovery)

• 路由: /app/(tabs)/index.tsx

• 功能描述:
• Header: 显示用户头像与 Hamburger Menu 按钮（触发侧边栏）。
• 搜索栏: 静态搜索框，点击跳转搜索页。
• 分类 Tabs: 横向滚动 (Trending, Art, Collectibles)。
• 核心交互区 (Featured): 堆叠卡片 (Deck Swiper)。支持左右拖拽切换推荐 NFT，带斜向飞出动画。
• Top Sellers: 底部简略列表。

• 组件复用: SwipeableCardDeck, SharedHeader, CustomRefreshView (自定义下拉刷新)。

4.3 NFT 详情页 (Detail Screen)

• 路由: /app/nft/[id].tsx

• 功能描述:
• Header: 自定义透明导航栏 (返回键 + 更多菜单)。
• 主图: 1:1 高清大图，圆角处理。
• 信息区: 创作者信息、当前出价、倒计时 (两列布局)。
• Tabs: Details / Owners / Bids / History (点击切换内容)。
• 底部工具条: 悬浮毛玻璃条 (Floating Blur Bar)。包含当前价格与 "Place Bid" 按钮。

• 开发要点:
• 使用 BlurView 实现底部工具条，需绝对定位 (position: absolute, bottom: 0)。
• 底部需配合 useSafeAreaInsets 留出 Home Indicator 空间。

4.4 排行榜 (Ranking)

• 路由: /app/(tabs)/ranking.tsx

• 功能描述:
• 展示热门 Collection 列表。
• 列表项包含：排名序号、合集头像 (带认证蓝标)、名称、地板价、涨跌幅。
• 右侧 "Follow" 按钮。

• 开发要点:
• 使用 FlatList 渲染长列表以保证性能。
• 点击列表项跳转至 /collection/[slug]。

4.5 个人中心 (User Profile)

• 路由: /app/(tabs)/profile.tsx

• 功能描述:
• Banner: 顶部自定义背景图，底部渐变融合。
• 身份区: 头像（负边距上移叠加 Banner）、用户名、钱包地址（支持复制）。
• 数据卡片: 只有毛玻璃背景，展示 Items, Balance, Volume。
• 资产列表: 吸顶 Tabs (Collected / Activity)。展示用户持有的 NFT 瀑布流。

• 状态管理:
• 需从 useWeb3Store (Zustand) 获取当前连接钱包的余额和 NFT 数据。

4.6 全局侧边栏 (Global Side Menu)

• 类型: 自定义 Modal 组件 (非路由页面)

• 功能描述:
• 替代底部 Tabs，作为全局导航中心。
• 样式: 右侧滑出，带半透明遮罩，菜单内容背景为深色毛玻璃。
• 内容: 包含用户信息、导航链接 (Home, Ranking, Profile)、设置、断开连接按钮。

• 交互:
• 菜单项需实现 阶梯式入场动画 (Staggered Animation)。