SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场expo-liquid-glass

expo-liquid-glass

编程与开发

查看项目

更新于 10-15 15:30

技能介绍

用途

expo-liquid-glass 用于在 Expo React Native 应用中设计并实现 Liquid Glass（液态玻璃）界面，目标是让玻璃 UI 看起来原生、内容保持可读，并在 iOS/Android 上安全降级。它主要面向需要实现浮动按钮、工具栏、分组控件、玻璃芯片等控件的 RN 屏幕，以及需要系统原生 Liquid Glass 标签栏和 iOS 26 导航行为的场景。

执行顺序

技能规定的推进顺序为：

  1. 确认平台与运行时约束。
  2. 对设计密集型任务，检查设计是否与 HIG 分类对齐。
  3. 选择一条主要实现路径（仅在必要时增加第二条路径）。
  4. 在编写代码前先套用苹果对齐的视觉规则。
  5. 实现带守卫的玻璃组件并显式提供回退。
  6. 在浅色/深色以及 clear/tinted 外观下运行可访问性与视觉 QA。

主要能力与四条实现路径

  • expo-glass-effect：适用于大多数需要玻璃芯片、浮动按钮、工具栏、分组控件的 RN 屏幕。资料称其为 Expo 中最佳默认选择，但必须对运行时可用性做守卫。
  • @expo/ui（Host + SwiftUI 修饰符）：适用于原生 SwiftUI 组合、高级玻璃过渡、需要协调 ID/命名空间的场景。仅限 iOS 家族，需要开发构建工作流，使用 SwiftUI 心智模型。
  • expo-router/unstable-native-tabs：用于系统原生 Liquid Glass 标签栏与 iOS 26 导航行为。属于不稳定 API，SDK 54 与 55 之间语法不同。
  • @callstack/liquid-glass：用于非 Expo 的 RN 项目或统一采用 Callstack 包的团队。聚焦 iOS/tvOS，同样需要回退与运行时检查。

可组合使用：原生标签栏用于导航外壳，expo-glass-effect 用于屏幕内浮动控件，仅在需要 SwiftUI 特有行为时使用 @expo/ui。

使用方式与关键规则

预检约束：Liquid Glass 只用于控件/导航外壳，不用于主要内容表面；这些 API 变化快，定稿语法前需查阅当前 Expo SDK 文档；高级 iOS 原生特性（expo-glass-effect、@expo/ui）在 iOS 的 Expo Go 中不可靠，需使用开发构建。

设计对齐（设计密集型任务推荐）：对照 HIG 的四类分桶评估——Foundations（材质、色彩、布局、动效、可访问性）、Patterns（导航/搜索/流程一致性）、Components（栏、按钮、菜单、字段、侧边栏、覆盖层）、Inputs（触摸、手势、键盘、指针行为）。若提议样式与 HIG 意图冲突，优先选择与 HIG 一致的方案。

苹果风格设计规则（关键）：层级靠布局与间距而非装饰层；把相关控件分组为共享玻璃簇，不相关组用空间分隔；让内容延伸至控件下方，使玻璃有可折射的内容；优先使用系统控件/材质，最小化定制；把强品牌色放入内容/背景而非导航栏；在浅色、深色、clear、tinted 模式下保持图标/标签高对比；避免全屏玻璃面板，玻璃仅用于顶层交互表面。

实现模式：

  • 模式 A：带守卫的自适应玻璃包装组件。示例代码使用 isGlassEffectAPIAvailable()，可用时渲染 GlassView；iOS 不可用时回退到 BlurView（intensity 40、tint dark）；其他平台回退到半透明 View（rgba(60,60,67,0.30)）。
  • 模式 B：expo-glass-effect 安全用法。按需选择 glassEffectStyle: 'regular' | 'clear' | 'identity'；不要在 GlassView 或其父级上设置 opacity < 1；isInteractive 仅在挂载时生效，需要变化时用 key 重新挂载；避免在 GlassView 内放可滚动内容；渲染前用 isGlassEffectAPIAvailable() 检查可用性。
  • 模式 C：原生标签栏（随 SDK 变化的语法）。SDK 55+ 使用复合 API（NativeTabs.Trigger.TabBarIcon / TabBarLabel），SDK 54 使用 NativeTabs.Trigger.Icon / Label。已知问题：透明 NativeTabs 在某些堆栈中 push 屏幕时可能闪白，可通过 ThemeProvider 设置背景色缓解。
  • 模式 D：带命名空间 ID 的 SwiftUI 玻璃。需要联动玻璃过渡时使用 @expo/ui，示例从 @expo/ui/swift-ui 引入 Host、Namespace、Text，从 @expo/ui/swift-ui/modifiers 引入 glassEffect、glassEffectID、padding，用 Namespace 配合 glassEffectID 协调过渡。

可访问性与质量门禁

视为完成前的必做项：检查 AccessibilityInfo.isReduceTransparencyEnabled() 并提供非玻璃回退；验证在明亮、深色和高饱和背景上的可读性；在 iOS 26 上验证 clear 与 tinted 两种系统外观；在交互动画期间保持点击目标与间距稳定；在低端测试设备上分别测量有无玻璃时的滚动性能。

常见失败模式与修复

  • 头部双重模糊：原生头部模糊加自定义玻璃子元素导致层叠浑浊。修复：头部配件使用普通半透明 View。
  • 玻璃显得扁平：纯色背景移除了折射线索。修复：在表面后方加入色调变化、渐变或图像。
  • 控件过度定制：大量 tint/边框/阴影堆叠降低原生感。修复：从系统默认开始，再做轻微调整。
  • 缺少运行时守卫：无守卫地渲染玻璃 API 可能崩溃或在不受支持的构建上静默降级。
  • 版本漂移：native-tabs 与 SwiftUI 包装器演进很快，编码前查阅对应 SDK 文档。

参考资料加载策略

仅按任务需要加载：references/expo-ui-swiftui.md（SwiftUI 组件映射、Host 布局、修饰符模式）、references/native-tabs.md（原生标签栏行为、迁移说明、已知问题）、references/callstack-liquid-glass.md（Callstack 设置与兼容性取舍）、references/apple-liquid-glass-design.md（苹果对齐的组合、层级、动效与可访问性规则）。若请求偏设计（而非偏 API），优先使用本文件中的苹果视觉规则，再从相关参考中获取 API 语法。

限制

资料中未提供该技能的具体收费、价格、支持平台范围（除文中提到的 iOS/Android 相关说明外）以及具体使用步骤以外的额外信息。