SuperAPI AI 工具集

ui-mobile

前端与建站

查看项目

更新于 10-16 03:13

技能介绍

用途:为 React Native 移动应用提供移动端 UI 设计规范与组件模式,覆盖 iOS 与 Android 平台。

主要能力:

  • 无障碍强制标准:所有交互元素触摸目标最小 44x44 点;文字对比度满足 WCAG 2.1 AA(正文 4.5:1,大字/UI 3:1);按钮必须有可见边界(主按钮实底、次按钮可见背景、幽灵按钮需边框);每个交互元素需 accessibilityLabel/accessibilityRole 等标签;Pressable 需有可见按下态。
  • 平台差异:用 Platform.select 处理阴影与 elevation、字体(iOS 用 System,Android 用 Roboto)。设计语言分别参照 iOS Human Interface Guidelines 与 Android Material Design 3。
  • 间距与安全区:4px 基准网格(xs 4、sm 8、md 16、lg 24、xl 32、2xl 48);用 react-native-safe-area-context 的 useSafeAreaInsets 处理刘海与 Home 指示条。
  • 排版与颜色:提供 largeTitle 34、title 22、headline 17、body 17 等字号层级;语义化颜色与深色模式变体,用 useColorScheme 切换。
  • 组件模式:卡片、主/次按钮、输入框、分组列表、底部标签栏、大标题头部等示例。
  • 动画与加载:Animated 须 useNativeDriver: true;复杂动画用 react-native-reanimated;含骨架屏与 ActivityIndicator。

使用方式:在 React Native 项目中按资料中的 StyleSheet 示例与 Pressable 属性编写组件,安装并引入 react-native-safe-area-context、react-native-reanimated 等依赖。资料未提供具体安装命令、版本要求或完整项目配置,这些暂未提供。

适用场景:构建需要同时兼顾 iOS 与 Android、强调可访问性与触摸交互的移动界面。

限制:资料未说明收费、价格、平台支持范围、性能指标或实际效果,均暂未提供;示例代码为片段,需结合实际项目调整。