#gluestack-ui - 主题对gluestack-ui 主题系统、设计令牌和 NativeWind 集成的专业知识，用于跨 React 和 React Native 创建一致的、可定制的 UI。 ## 概述 gluestack-ui 使用 NativeWind（React Native 的 Tailwind CSS）进行样式设置。主题系统提供设计令牌、暗模式支持以及通过 Tailwind 配置进行自定义。 ## 关键概念 ### 配置文件 gluestack-ui 项目在项目根目录使用`gluestack-ui.config.json`： { “顺风”：{ "config": "tailwind.config.js", "css": "全局.css" }, “组件”：{ “路径”：“组件/ui” }, “打字稿”：正确， “框架”：“世博会” } ### 主题提供程序设置使用 GluestackUIProvider 包装您的应用程序： // 应用程序.tsx 从'@/components/ui/gluestack-ui-provider'导入{GluestackUIProvider}；从'@/components/ui/gluestack-ui-provider/config'导入{config}；导出默认函数 App() { 返回（ <你的应用程序/> ）； } 对于暗模式支持：从'react-native'导入{useColorScheme}；从'@/components/ui/gluestack-ui-provider'导入{GluestackUIProvider}；导出默认函数 App() { const colorScheme = useColorScheme(); 返回（ <你的应用程序/> ）； } ### NativeWind 配置通过 `tailwind.config.js` 配置 Tailwind CSS： // tailwind.config.js const { 主题 } = require('@gluestack-ui/nativewind-utils/theme'); /** @type {import('tailwindcss').Config} */ 模块. 导出 = { 黑暗模式：'类'，内容：[ './app/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}', ], 预设：[require('nativewind/preset')], 主题：{ 扩展：{ 颜色：主题.颜色， fontFamily：主题.fontFamily，字体大小：主题.字体大小， borderRadius：主题.borderRadius， boxShadow：主题.boxShadow， }, }, 插件：[]， }; ## 设计代币 ### 颜色标记 gluestack-ui 提供语义颜色标记： // tailwind.config.js 模块. 导出 = { 主题：{ 扩展：{ 颜色：{ // 原色主要：{ 0: '#E5F4FF', 50: '#CCE9FF', 100: '#B3DEFF', 200: '#80C8FF', 300: '#4DB3FF', 400: '#1A9DFF', 500: '#0077E6', 600: '#005CB3', 700: '#004080', 第800章：“#00264D” 第900章：‘#000D1A’， 950: ‘#00060D’, }, // 辅助颜色次要：{ 0: '#F5F5F5', 50: '#E6E6E6', // ...更多色调 }, // 语义颜色成功：{ 50: '#ECFDF5', 500: '#22C55E', 700: '#15803D', }, 警告：{ 50: '#FFFBEB', 500：'#F59E0B'， 700: '#B45309', }, 错误：{ 50: '#FEF2F2', 500：'#EF4444'， 700: '#B91C1C', }, 信息：{ 50: '#EFF6FF', 正文 500: '#3B82F6', 700: '#1D4ED8', }, // 排版颜色排版：{ 0: '#FFFFFF', 50: '#F9FAFB', 100: '#F3F4F6', 200: '#E5E7EB', 300: '#D1D5DB', 400: '#9CA3AF', 第500章：“#6B7280” 600: '#4B5563', 700: '#374151', 第800章：‘#1F2937’， 900: '#111827', 950: ‘#030712’, }, // 背景颜色背景：{ 0: '#FFFFFF', 50: '#F9FAFB', 100: '#F3F4F6', 200: '#E5E7EB', // 深色模式变体黑暗：'#0F172A'， }, // 轮廓/边框颜色大纲：{ 0: '#FFFFFF', 50: '#F9FAFB', 100: '#F3F4F6', 200: '#E5E7EB', 300: '#D1D5DB', }, }, }, }, }; ### 版式标记配置字体系列和大小： // tailwind.config.js 模块. 导出 = { 主题：{ 扩展：{ 字体系列：{ 标题：['Inter-Bold', 'sans-serif'], body: ['Inter-Regular', 'sans-serif'], 单声道：['JetBrainsMono-Regular'，'等宽']， }, 字体大小：{ '2xs': ['10px', { lineHeight: '14px' }], xs: ['12px', { lineHeight: '16px' }], sm: ['14px', { lineHeight: '20px' }], md: ['16px', { lineHeight: '24px' }], lg: ['18px', { lineHeight: '28px' }], xl: ['20px', { lineHeight: '28px' }], '2xl': ['24px', { lineHeight: '32px' }], '3xl': ['30px', { lineHeight: '36px' }], '4xl': ['36px', { lineHeight: '40px' }], '5xl': ['48px', { lineHeight: '1' }], '6xl': ['60px', { lineHeight: '1' }], }, }, }, }; ### 间距和大小一致的间距比例： // tailwind.config.js 模块. 导出 = { 主题：{ 扩展：{ 间距：{ 像素：'1像素'， 0: '0px', 0.5: '2px', 1: '4px', 1.5: '6px', 2: '8 像素', 2.5: '10 像素', 3: '12 像素', 3.5: '14 像素', 4: '16 像素', 5: '20 像素', 6: '24 像素', 7: '28 像素', 8: '32 像素', 9: '36 像素', 10: '40 像素', 11: '44 像素', 12: '48 像素', 14: '56 像素', 16: '64px', 20: '80 像素', 24: '96 像素', 28: '112 像素', 32: '128 像素', }, 边框半径：{ 无：'0px'， sm: '2px', 默认值：'4px'， MD: '6px', LG：“8像素”， xl: '12px', '2xl': '16px', '3xl': '24px', 完整：'9999px'， }, }, }, }; ## 深色模式 ### 自动深色模式使用系统配色方案：从'react-native'导入{useColorScheme}；从'@/components/ui/gluestack-ui-provider'导入{GluestackUIProvider}；函数应用程序（）{ const colorScheme = useColorScheme(); 返回（ <主应用程序/> ）； } ### 手动暗模式切换创建手动控制的主题上下文： // 上下文/ThemeContext.tsx 从 'react' 导入 { createContext, useContext, useState, useEffect }; 从'react-native'导入{useColorScheme}；从 '@react-native-async-storage/async-storage' 导入 AsyncStorage；类型 ThemeMode = 'light' | '黑暗' | '系统'; 接口 ThemeContextType { 模式：主题模式；解决模式：“轻”| '黑暗的'; setMode: (模式: ThemeMode) => void; } const ThemeContext = createContext（未定义）；导出函数 ThemeProvider({ 孩子 }: { 孩子: React.ReactNode }) { const systemColorScheme = useColorScheme(); const [mode, setModeState] = useState('system'); 使用效果（（）=> { AsyncStorage.getItem('主题模式').then((stored) => { if (存储) setModeState(存储为 ThemeMode); }); }, []); const setMode = (newMode: ThemeMode) => { 设置模式状态（新模式）； AsyncStorage.setItem('主题模式', newMode); }; constsolvedMode: 'light' | 常量resolvedMode: 'light' | “黑暗”= 模式==='系统'？ (systemColorScheme ?? 'light') : 模式; 返回（ {孩子} ）； } 导出函数 useTheme() { const context = useContext(ThemeContext); if (!context) throw new Error('useTheme 必须在 ThemeProvider 中使用'); 返回上下文； } 应用程序中的用法： // 应用程序.tsx 从 '@/contexts/ThemeContext' 导入 { ThemeProvider, useTheme }; 从'@/components/ui/gluestack-ui-provider'导入{GluestackUIProvider}；函数 ThemedApp() { const {resolvedMode} = useTheme(); 返回（ <主应用程序/> ）； } 导出默认函数 App() { 返回（ <主题提供者> <主题应用/> ）； } ### 深色模式造型使用 dark: 前缀来表示深色模式样式：你好世界 ## 最佳实践 ### 1\.使用语义颜色标记使用语义标记而不是文字颜色： // 好：语义标记内容 <按钮操作=“主要”> 操作 // 避免：文字颜色内容 ### 2\.创建设计系统文件集中设计决策： // 设计系统/tokens.ts 导出常量标记= { 颜色：{ 品牌：{ 主要：'主要-500'，中学：'中学-500'，重音：'info-500', }, 反馈：{ 成功：“成功500”，警告：“警告-500”，错误：'错误500'， }, }, 间距：{ 页面：'px-4 py-6'，部分：'py-8'，卡：“p-4”， }, 半径：{ 卡：'rounded-xl'，按钮：'圆角-lg'，输入：'rounded-md'， }, 作为常量； // 用法从'@/design-system/tokens'导入{tokens}； ### 3\.适当扩展主题扩展而不是覆盖基本主题： // tailwind.config.js const { 主题：gluestackTheme } = require('@gluestack-ui/nativewind-utils/theme'); 模块. 导出 = { 主题：{ 扩展：{ // 扩展颜色，不替换颜色：{ ...gluestackTheme.colors， // 添加品牌颜色品牌：{ 50: '#FFF5F7', 100: '#FFEAEF', 500: '#FF1493', 600: '#DB1086', 700: '#B80D6E', }, }, }, }, }; ### 4\.创建可重用的样式实用程序构建风格一致的助手： // utils/styles.ts 从 'clsx' 导入 { clsx, type ClassValue }; 从 'tailwind-merge' 导入 { twMerge }；导出函数 cn(...输入: ClassValue[]) { 返回 twMerge(clsx(输入)); } // 卡片样式导出 const 卡样式 = cn( 'bg-background-0 暗:bg-background-100', '边框边框-轮廓-200 暗：边框-轮廓-700'， '圆角-xl', 'p-4' ）； // 交互状态导出 const InteractiveStyles = cn( '活动：不透明度-80'， '焦点：ring-2 焦点：ring-primary-500 焦点：ring-offset-2' ）； ### 5\.处理特定于平台的主题考虑平台差异：从'react-native'导入{平台}； // 平台特定的阴影 const ShadowClass = Platform.select({ ios: 'shadow-md', 安卓：'海拔-4'，网络：'影子-lg'， }); 卡片内容 ## 示例 ### 自定义主题配置完整的自定义主题设置： // tailwind.config.js const { 主题：gluestackTheme } = require('@gluestack-ui/nativewind-utils/theme'); /** @type {import('tailwindcss').Config} */ 模块. 导出 = { 黑暗模式：'类'，内容：[ './app/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}', ], 预设：[require('nativewind/preset')], 主题：{ 扩展：{ 颜色：{ ...gluestackTheme.colors， // 自定义品牌调色板品牌：{ 50: '#F0F9FF', 100: '#E0F2FE', 200: '#BAE6FD', 300: '#7DD3FC', 400: '#38BDF8', 500: '#0EA5E9', 600: '#0284C7', 第700章：‘#0369A1’，第800章：‘#075985’，第900章：“#0C4A6E” 950: ‘#082F49’, }, // 覆盖primary以使用品牌主要：{ 50: '#F0F9FF', 100: '#E0F2FE', 200: '#BAE6FD', 300: '#7DD3FC', 400: '#38BDF8', 500: '#0EA5E9', 600: '#0284C7', 第700章：‘#0369A1’，第800章：‘#075985’，第900章：“#0C4A6E” 950: ‘#082F49’, }, }, 字体系列：{ 标题：['Poppins-Bold', 'sans-serif'], body: ['Poppins-Regular', 'sans-serif'], mono: ['FiraCode-Regular', '等宽'], }, 边框半径：{ ...gluestackTheme.borderRadius，卡：'16px'，按钮：'12px'， }, }, }, 插件：[]， }; ### 主题切换器组件从'react'导入{useState}；从'@/components/ui/hstack'导入{HStack}；从 '@/components/ui/button' 导入 { Button, ButtonText, ButtonIcon }; 从 'lucide-react-native' 导入 { SunIcon, MoonIcon, MonitorIcon }; 从 '@/contexts/ThemeContext' 导入 { useTheme } ；类型 ThemeOption = 'light' | '黑暗' | '系统'; 导出函数 ThemeSwitcher() { const { 模式，setMode } = useTheme(); const 选项：{ 值：主题选项；图标：SunIcon类型；标签：字符串 }[] = [ { value: 'light', icon: SunIcon, label: 'Light' }, { value: 'dark', icon: MoonIcon, label: 'Dark' }, { value: '系统', 图标: MonitorIcon, 标签: '系统' }, ]; 返回（ {options.map((选项) => ( <按钮键={选项.值} 变量={模式===选项.值？ '实体'：'轮廓'} 动作={模式===选项.值？ '主要'：'次要'} 尺寸=“SM” onPress={() => setMode(option.value)} > {选项.标签} ))} ）； } ### 主题卡组件从'@/components/ui/box'导入{Box}；从'@/components/ui/vstack'导入{VStack}；从'@/components/ui/heading'导入{标题}；从 '@/components/ui/text' 导入 { Text }；从 '@/utils/styles' 导入 { cn }；接口 ThemedCardProps { 标题：字符串；描述：字符串；变体？： '默认' | '升高' | “概述”；孩子？：React.ReactNode； } 导出函数 ThemedCard({ 标题，描述，变体='默认'，孩子们， }: ThemedCardProps) { const 变量样式 = { 默认值：'bg-background-0 dark:bg-background-100', 升高： cn( 'bg-background-0 暗:bg-background-100', '阴影-lg 黑暗：阴影-无'， '暗：边框暗：边框轮廓-700' ), 概述： cn( '背景透明', '边框-2边框-轮廓-300暗：边框-轮廓-600' ), }; 返回（ <标题大小=“md”className=“text-typography-900 dark：text-typography-50”> {标题} <文字大小=“sm”className=“text-typography-500 dark：text-typography-400”> {描述} {孩子} ）； } ## 常见模式 ### 渐变背景从“expo-线性梯度”导入{LinearGradient}；从'@/components/ui/box'导入{Box}；函数 GradientCard({ 孩子 }: { 孩子: React.ReactNode }) { 返回（ <线性渐变颜色={['#0EA5E9', '#6366F1']} 开始={{ x: 0, y: 0 }} 结束={{ x: 1, y: 1 }} 样式={{填充：16}} > {孩子} ）； } ### 条件主题样式从 '@/contexts/ThemeContext' 导入 { useTheme } ；函数自适应图像（）{ const {resolvedMode} = useTheme(); 返回（ <图片来源={ 解决模式 === '黑暗' ？需要（'@/assets/logo-dark.png'） : 要求('@/assets/logo-light.png') } 类名=“w-32 h-32” /> ）； } ## 反模式 ### 不要使用硬编码颜色 // 不好：硬编码的十六进制值你好 // 好：语义标记你好 ### 不要混合主题系统 // 不好：将 StyleSheet 与 NativeWind 混合 const 样式 = StyleSheet.create({ 容器：{背景颜色：'#FFFFFF'}， }); <文本>内容 // 好：一致使用 NativeWind <文本>内容 ### 不要忘记黑暗模式变体 // 不好：缺少深色模式内容 // 好：包括深色模式变体内容 ## 相关技能 * **gluestack-components** ：使用gluestack-ui组件构建UI * **gluestack-accessibility** ：确保可访问的实现

胶合主题

包含技能