主题
自定义 NativeWind、React Native Reusables 与应用主题行为。
Expo 模板用 NativeWind 做 app styling,用 React Native Reusables-style primitives 做组件 variants,并用 React Navigation theme objects 覆盖 native navigation surfaces。 浅色/深色模式作为用户偏好持久化,默认支持跟随系统。
关键文件
Token flow
| 层 | 文件 | 修改内容 |
|---|---|---|
| CSS variables | global.css | --background、--primary、--ios-grouped-bg、separator、input、grouped-surface values |
| Tailwind aliases | tailwind.config.js | bg-background、text-foreground、bg-ios-grouped-bg、text-ios-tint、hairline borders |
| JS constants | lib/theme.ts | THEME、IOS_COLORS、getIOSColor()、React Navigation NAV_THEME |
| Components | components/ui/* | CVA variants 与可复用 primitive styling |
| Screens | app/**/*.tsx | NativeWind className,以及少量 runtime colors 的 getIOSColor() |
保持 global.css 和 lib/theme.ts 同步。NativeWind classes 读取 CSS tokens;
React Navigation 和部分 runtime style objects 读取 JS tokens。
外观偏好
ThemePreferenceProvider 把 system、light、dark 存在
preferences.theme.v1,底层使用 lib/cache.ts。Native 平台使用 AsyncStorage;
web 使用 localStorage。hydrate 后,provider 会调用
nativewindColorScheme.set(theme)。
ThemeToggle 是紧凑的 icon button,会在当前 resolved color scheme 的 light/dark
之间切换。完整的 Profile picker 暴露三个选项,包括 system。
app/_layout.tsx 读取 useColorScheme(),应用 NAV_THEME,设置 status bar style,
并给 root stack 设置当前 scheme 的 iOS grouped background。
Splash pairing
app.config.ts 刻意让 native splash background 匹配 app 的 grouped background:
浅色是 #f2f2f7,深色通过 expo-splash-screen plugin 设置为 #000000。
这样首个 React screen 绘制前不会出现白色或黑色闪屏。
可选的 AnimatedSplash component 会把 assets/lottie/splash.json 中的 Lottie
覆盖在 app 上,并在 isReady 为 true 后淡出。
Rebrand checklist
修改产品颜色
更新 global.css,必要时更新 tailwind.config.js aliases,并同步
lib/theme.ts。同时检查 grouped backgrounds 和 primary/tint colors。
替换 assets
准备一个 1024x1024 source icon,然后运行:
pnpm generate:assets脚本会写出 icon.png、adaptive-icon.png、splash.png、favicon.png。
如果生成的 splash background 需要匹配自定义品牌色,设置 SPLASH_BACKGROUND。
更新 app identity
在 app.config.ts 与 .env.local 中修改 display names、bundle/package IDs、
schemes、associated domains 与 store URLs。
验证 surfaces
运行 iOS、Android、web。检查 cold launch、tab headers、modals、bottom sheets、 dialogs、toast colors、Component gallery 与 Showcase theming demo。
