用途:为 gluestack-ui v5 项目强制执行一套收敛、有明确取向的样式约定,限制可选方案到规范模式,从而降低决策负担、提升性能、保证主题一致。支持 NativeWind v5(Expo + RN CLI)与 UniWind(仅 Expo)两种样式引擎。
主要能力:核心原则包括——优先使用 Gluestack 组件而非 React Native 原生组件;组件有内置属性(size、variant、space)时优先用属性而非 className;颜色只允许语义化令牌(如 text-foreground、bg-primary、border-border),禁止 typography-、neutral-、gray-* 等通用令牌和 red-500、blue-600 等编号颜色,可带透明度;用 className 而非内联样式;遵循间距刻度而非任意像素值;组件采用复制粘贴到代码库的方式而非依赖安装;使用复合子组件模式;删除无用代码。
子技能分工:setup 负责初始化、安装与配置(npx gluestack-ui@latest init、npx gluestack-ui@latest add --all、Provider 设置、排错);creating-components 提供建组件流程与模板;components 讲组件用法、复合模式、图标与 Provider;styling 讲颜色、间距、暗色模式、tva 变体与 className 合并;variants 讲自定义变体与扩展设计系统;performance 讲跨端渲染、memo、Reanimated 动画、安全区与 FlatList;validation 提供检查清单与反模式。
必要用法:组件用法以官方文档为准(https://gluestack.io/ui/docs/components/${componentName}/),导入路径为 @/components/ui/${componentName}。关键规则:InputIcon 必须包在 InputSlot 中;使用 tva 管理多变体;暗色模式用 dark: 前缀。
适用场景:新建带样式的组件、审查与重构样式、修复样式不一致、添加暗色模式、为组件设主题,以及从 gluestack-ui 复制组件。
限制:Next.js 支持待 NativeWind v5 web 就绪;内联样式仅作最后手段并需说明理由。其余收费、价格等信息暂未提供。