Expo + Nativewind 中CSS变量在iOS上无法生效的问题排查

我明白你现在的困扰——用Nativewind配置的CSS变量在Web上好好的，到iOS就完全不生效，只显示默认样式，这确实挺让人挠头的。咱们一步步来排查问题根源，再给你可行的解决办法：

问题核心原因 #

Web端和iOS端对CSS变量的处理逻辑完全不一样：

• Web端：Nativewind会把Tailwind类转换成浏览器能识别的CSS类，CSS变量（var(--background)）可以被浏览器直接解析，所以样式正常生效。
• iOS端：Nativewind会把Tailwind类转换成React Native的StyleSheet对象，但React Native本身不支持CSS变量语法（比如--background这种命名）。你之前把vars()返回的变量直接放到View的style属性里，这些变量会被React Native直接忽略，导致Tailwind类里的var(--xxx)无法解析，只能显示默认样式。

解决办法：改用Nativewind原生主题切换机制 #

Nativewind v4+提供了专门的主题切换工具，能同时兼容Web和Native端，咱们把你的代码调整成符合Nativewind原生逻辑的写法：

1. 安装依赖（如果需要） #

如果还没装@nativewind/theme，先安装它：

npm install @nativewind/theme
# 或者
yarn add @nativewind/theme

2. 重写tailwind.config.mjs #

用Nativewind的createThemes函数直接定义light/dark主题，这样Nativewind能在Native端生成对应的StyleSheet：

import { createThemes } from '@nativewind/theme';

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  darkMode: 'class', // 基于类名切换主题
  theme: createThemes({
    light: {
      colors: {
        background: "#ffffff",
        foreground: "#252525",
        card: "#ffffff",
        // 其他light主题颜色...
      },
      borderRadius: {
        DEFAULT: "0.625rem", // 把base里的radius移到这里
      }
    },
    dark: {
      colors: {
        background: "#252525",
        foreground: "#fbfbfb",
        card: "#343434",
        cardForeground: "#fbfbfb",
        popover: "#444444",
        popoverForeground: "#fbfbfb",
        primary: "#ebebeb",
        // 其他dark主题颜色...
      },
      borderRadius: {
        DEFAULT: "0.625rem",
      }
    },
  }),
  plugins: [],
};

3. 调整Theme.tsx组件 #

去掉把vars()结果直接放到View style的代码，改用动态添加类名的方式切换主题，这样Nativewind能自动识别并应用对应主题的样式：

import React, { createContext, useEffect, useState } from "react";
import { useColorScheme, View } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { SafeAreaProvider } from "react-native-safe-area-context";

type ThemeProps = {
  children: React.ReactNode;
  colorScheme?: "dark" | "light";
  setColorScheme?: (colorScheme: "dark" | "light") => void;
};

export const ThemeContext = createContext<{
  colorScheme: "dark" | "light";
  setColorScheme: (colorScheme: "dark" | "light") => void;
}>({
  colorScheme: "light",
  setColorScheme: () => {},
});

export default function Theme({ children, colorScheme, setColorScheme }: ThemeProps) {
  const defaultColorScheme = useColorScheme() as "dark" | "light";
  const [colorSchemeState, setColorSchemeState] = useState(defaultColorScheme);

  // 同步外部传入的colorScheme
  useEffect(() => {
    if (colorScheme) {
      setColorSchemeState(colorScheme);
    }
  }, [colorScheme]);

  // 同步colorScheme变化到外部
  useEffect(() => {
    if (typeof setColorScheme === "function") {
      setColorScheme(colorSchemeState);
    }
  }, [colorSchemeState]);

  return (
    <ThemeContext.Provider
      value={{
        colorScheme: colorSchemeState,
        setColorScheme: setColorSchemeState,
      }}
    >
      <SafeAreaProvider>
        <GestureHandlerRootView style={{ flex: 1 }}>
          {/* 动态添加dark类来切换主题 */}
          <View className={`flex-1 ${colorSchemeState === "dark" ? "dark" : ""}`}>
            {children}
          </View>
        </GestureHandlerRootView>
      </SafeAreaProvider>
    </ThemeContext.Provider>
  );
}

4. 组件中正常使用Tailwind类 #

现在你可以像之前一样在组件里用bg-background、text-foreground这些类了，不管是Web还是iOS端，Nativewind都会自动解析成对应的样式：

// card.tsx示例
import { View, Text } from "react-native";

export default function Card() {
  return (
    <View className="bg-card p-4 rounded-lg">
      <Text className="text-cardForeground">这是卡片内容</Text>
    </View>
  );
}

额外提示 #

如果需要手动切换主题，直接调用ThemeContext里的setColorScheme方法即可，比如：

import { useContext } from "react";
import { Button } from "react-native";
import { ThemeContext } from "./theme";

export function ThemeToggle() {
  const { colorScheme, setColorScheme } = useContext(ThemeContext);
  return (
    <Button
      title={`切换到${colorScheme === "dark" ? "浅色" : "深色"}模式`}
      onPress={() => setColorScheme(colorScheme === "dark" ? "light" : "dark")}
    />
  );
}

内容来源于stack exchange