雲里
里雾

NativeWind vars() 与 RN 暗色模式

mindgym 开发 更新于 2026/4/23

React Native 没有 DOM，没有 CSS 引擎，因此 Web 上常用的 :root / .dark CSS 变量方案在 RN 中完全无效。NativeWind v4 提供的 vars() API 是 RN 环境下实现 CSS 变量的唯一方式——它在 JS 层创建变量绑定，作为 style prop 传给根 View，子组件的 var(--color-xxx) 引用才能解析到实际色值。

为什么 CSS 变量在 RN 不工作

Web 上的暗色模式通常这样实现：

:root { --color-bg: #ffffff; }
.dark { --color-bg: #0f0f0f; }

这依赖浏览器的 CSS 引擎：解析选择器、匹配 DOM 节点、级联变量。RN 没有这些——RN 的”样式”是 JS 对象，由 Yoga 布局引擎处理，不经过 CSS 解析器。

NativeWind vars() 的工作方式

import { vars } from 'nativewind'

const themes = {
  light: vars({ '--color-bg': '#faf9f6', '--color-surface': '#ffffff' }),
  dark: vars({ '--color-bg': '#0f0f0f', '--color-surface': '#1a1a1a' }),
}

// 根 View 注入变量，所有子组件的 className="bg-bg" 会解析到对应色值
<View style={[{ flex: 1 }, themes[colorScheme]]}>
  {children}
</View>

vars() 把 CSS 变量名→值的映射转成 RN style 对象。NativeWind 的 Metro 插件在编译期把 bg-bg 解析为 var(--color-bg) 引用，运行时通过 React 的 style 继承链向下传递。

MindGym 的三次迭代

  1. useColorScheme sync — 只切换了 NativeWind 的 colorScheme prop，但 Tailwind 的 bg-surface 等类名指向固定色值，不会跟着变。
  2. CSS 变量 :root/.dark — 写进 global.css，Metro 编译通过但运行时无效——RN 没有 DOM 来匹配这些选择器。
  3. vars() API — 在根 View 的 style 中注入变量对象，子组件的 var(--color-xxx) 正确解析。

注意事项

参见

参考