SuperAPI AI 工具集

theming

通用与其它

查看项目

更新于 10-15 20:13

技能介绍

用途:为 Expo Router 应用搭建一套同时适配 iOS 与 Android 的统一颜色系统,避免在代码中散落 Color.ios.、Color.android.dynamic. 或硬编码十六进制色值。语义化 token(background、text、link 等)会按平台解析为正确的原生颜色,自动随深色/浅色切换,并通过单一 useColors() Hook 读取。该模式来自 Platano 模板,可放入任意 Expo Router 应用。

主要能力:安装三个文件——config.ts(唯一事实来源,语义 token 设为 "native" 或十六进制,含品牌色,日常只需改此文件)、colors.ts(按平台解析 token,暴露 getSystemColor、useSystemColors、品牌辅助函数与 getNavigationTheme)、ThemeContext.tsx(ColorsProvider 及基于 React use 的 useColors()/useTheme()/useBrand() Hook),并小幅修改根 _layout.tsx 接入 Provider。

关键机制:原生与 Material You 颜色是平台颜色对象而非字符串,React 无法 diff,因此以 useColorScheme() 作为主题变化信号,解析函数接收 color scheme 参数使其成为显式依赖,切换时重新计算;ColorsProvider 在根部读取一次,切换即重渲染所有消费者。另需区分两个 ThemeProvider:ColorsProvider 供组件使用 useColors(),导航 ThemeProvider 负责导航外观(头部、标签栏、默认背景),二者都在根部,导航的用 getNavigationTheme(dark) 接入。

使用方式:目标为 Expo SDK 56 或更新版本的 Expo Router 应用。先确认项目 app 目录与根布局、SDK 版本及 Color API 是否可用;SDK 56+ 按模板使用,导航主题相关导入来自 expo-router/react-navigation;低于 SDK 56 需从 @react-navigation/native 导入 ThemeProvider、DarkTheme、DefaultTheme、Theme,且 Color API 可能不存在,可升级或改用十六进制回退。检测 tsconfig.json 的导入别名并匹配。将三个文件放在同一文件夹(如 src/theme/ 或 theme/),若已有主题模块不要覆盖,先阅读并说明重叠再合并或另放。随后外科式修改 _layout.tsx,保留原有 Provider、屏幕与选项,用 ColorsProvider 包裹,并在读取 color scheme 的内层组件中设置导航主题。可用 npx tsc --noEmit 做类型检查,运行后切换系统外观验证颜色与导航外观实时更新,Android 真机更换壁纸应改变 Material You 调色板。

适用场景与限制:适合需要跨平台统一主题的 Expo Router 应用。仅安装颜色与品牌,不包含间距、圆角预设或持久化。自定义时改 config.ts 即可全局生效;关闭 Android 品牌 Material You 可设 brand.useAndroidDynamic: false;新增 token 需在 config.ts 与 colors.ts 中同步添加。文件即用户代码,建议阅读注释并调整。具体收费、价格与平台支持范围暂未提供。