Skip to content

AI 开发提示:发现标签页屏幕

上下文

你正在为 MysticX Expo 移动应用构建 (tabs)/discover 屏幕。 屏幕目标: 一个目录屏幕。以水平滚动分组为特色,包括“精选牌阵”、“塔罗牌”(大/小阿尔卡纳浏览)、“读牌师”和“卡牌皮肤”。

线框图与布局参考

请以 wireframes 中此屏幕的结构流程为基础进行布局。UI 应该感觉宽敞且具有原生感,避免拥挤的网页视图布局。

设计系统规则(严格)

应用程序必须遵循神秘极简主义与天鹅绒黑 (Mystical Minimalism & Velvet Noir) 理念。

1. 颜色与背景

  • OLED 黑色基底: 背景必须是适合 OLED 的深黑色(#000000)、午夜海军蓝(#0a192f)或浓郁的深紫色。千万不要使用平淡的灰黑色。
  • 空灵釉面: 使用 expo-blur 处理导航元素、浮动操作栏或模态框背景,以创造磨砂的、半透明的深度感。
  • 强调色: 使用古金色(#c5a059)作为主要交互元素。使用极细的金属边框或微妙的霓虹发光(青色,紫水晶色)表示激活状态。

2. 排版

  • 标题: 使用高对比度、优雅的衬线体(例如 Playfair Display)。
  • 正文: 使用干净的无衬线体(例如 Inter)。
  • 间距: 对任何长篇的解牌文本强制执行 1.6 的最小行高设置。

3. 交互与“仪式”

  • 触觉: 导入 expo-haptics。为每一次按钮按下、卡牌滑动或列表滚动添加微妙的触觉反馈。
  • 动画: 使用 react-native-reanimated。不要使用标准的 React Native Animated
  • “慢 UI”: 过渡应该是从容且不急躁的。避免瞬间贴合。为卡牌操作使用 ease-out-back 弹簧物理效果,赋予它们“重量感”。
  • 加载: 不要使用默认的旋转加载图标。使用低于 0.1Hz 的发光“光环”脉冲效果。

任务

为此屏幕编写 React Native (Expo) 代码。确保你使用 react-native-reanimated 实现动画,expo-haptics 实现触摸反馈,并严格按照上述 OLED 黑色主题进行样式设置。确保代码是模块化、类型定义良好(TypeScript)且在视觉上令人惊艳的。