Skip to content

提示 01:发现标签页(牌阵、塔罗牌与读牌师市场)

目标

构建 Discover(发现)界面,这是浏览塔罗牌阵、大阿尔卡纳/小阿尔卡纳目录、塔罗读牌师和卡牌皮肤的中心枢纽。

设计约束(来自主设计指南)

  • 视觉: "OLED Noir"(#000000 基底,#0a192f 强调色)。使用"Ethereal Glaze"(磨砂玻璃效果)用于吸顶头部或底部标签栏。
  • 排版: 双字体系统。使用 Playfair Display 作为分区标题("精选牌阵"、"读牌师"),使用 Inter 作为牌阵名称和工具文本。
  • 节奏: "慢 UI"理念。水平滚动列表应使用较大的摩擦力/减速度(FlatList 中的 snapToIntervaldecelerationRate="fast"),使其感觉厚重而非滑腻。

需求

  1. 组件: DiscoverTabView 作为主可滚动目录。
  2. 分区(纵向滚动配合横向行):
    • 精选牌阵: 水平卡片展示牌阵布局(如凯尔特十字、过去/现在/未来)。在牌阵卡片背景上实现柔和的视差效果。
    • 塔罗牌浏览器: 视觉丰富的水平卡片列表。在这些卡片上使用微妙的内发光效果。
    • 塔罗读牌师: 带有发光"光环"边框的圆形头像(古金色 #c5a059)。
    • 卡牌皮肤: 展示高级设计的矩形卡片。
  3. 触觉反馈:
    • 每次水平滑动吸附必须触发 expo-hapticsimpactAsync(ImpactFeedbackStyle.Light)
    • 点击项目触发 ImpactFeedbackStyle.Medium
  4. 过渡动画:
    • 当用户点击牌阵或卡片时,使用 react-native-reanimated 的共享元素过渡动画,将其无缝过渡到详情页面。

实现指南

  • 使用 React Native 的 FlatListFlashList 实现水平轮播,以提高内存效率。
  • 预加载精选项目的资源,防止初始渲染时出现空白方块。
  • 确保头部在内容滚动到下方时产生模糊效果(expo-blur)。

Internal documentation for MysticX team