React Native中基于NativeWind实现优雅明暗模式（简化类名写法）

DevOps 小满

2026-7-29

优化NativeWind明暗模式简化类名实现

核心思路

利用NativeWind内置的颜色模式变体，在tailwind.config.js中统一定义适配明暗模式的颜色变量，无需在组件中写条件判断或字符串拼接，直接使用简化类名如text-textColor自动适配模式。

步骤1：修改tailwind.config.js配置

在颜色扩展中定义textColor，分别指定浅色模式（默认）和深色模式下的取值，同时根据需求配置darkMode：

module.exports = {
  content: ['./App.{js,jsx,ts,tsx}', './src/**/*.{js,jsx,ts,tsx}'],
  // 选择模式：
  // - 'media'：跟随系统自动切换（默认）
  // - 'class'：手动控制切换（需在根组件添加dark类）
  darkMode: 'class', 
  theme: {
    extend: {
      colors: {
        primary: '#ffffff', // 修正原配置中多写的f
        textColor: {
          DEFAULT: 'black', // 浅色模式文本色
          dark: 'white'     // 深色模式文本色
        }
      },
    },
  },
  plugins: [],
};

步骤2：根组件配置（仅class模式需要）

如果选择darkMode: 'class'（支持手动切换），在根组件中根据当前颜色模式添加dark类：

import { useColorScheme } from 'nativewind';
import { View, Text, Button } from 'react-native';

export default function App() {
  const { colorScheme, toggleColorScheme } = useColorScheme();

  return (
    <View className={`${colorScheme === 'dark' ? 'dark' : ''} flex-1 items-center justify-center p-4`}>
      {/* 直接使用简化类名，自动适配模式 */}
      <Text className="text-textColor text-xl mb-4">这是自动适配的文本</Text>
      <Button title="切换明暗模式" onPress={toggleColorScheme} />
    </View>
  );
}