NativeWind样式复用：如何实现类似Tailwind CSS的组件类复用？

NativeWind 完全支持类似 Tailwind CSS 的样式复用功能，下面是几种符合 React Native 生态的常用实现方式：

1. 封装自定义组件（推荐） #

这是最贴合 React Native 组件化思想的方式，把复用样式直接封装成独立组件，使用时直接调用：

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

// 封装复用组件
const Select2Dropdown = ({ children, ...props }) => {
  return <View className="rounded-b-lg shadow-md" {...props}>{children}</View>;
};

const Select2Search = ({ children, ...props }) => {
  return <View className="border border-gray-300 rounded" {...props}>{children}</View>;
};

const Select2ResultsGroup = ({ children, ...props }) => {
  return <Text className="text-lg font-bold text-gray-900" {...props}>{children}</Text>;
};

// 使用示例
<Select2Dropdown>
  {/* 下拉内容 */}
</Select2Dropdown>
<Select2Search>
  {/* 搜索框内容 */}
</Select2Search>
<Select2ResultsGroup>分组标题</Select2ResultsGroup>

你也可以用 NativeWind 提供的 className 高阶函数简化封装：

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

const Select2Dropdown = className(View, "rounded-b-lg shadow-md");
const Select2Search = className(View, "border border-gray-300 rounded");
const Select2ResultsGroup = className(Text, "text-lg font-bold text-gray-900");

2. 定义全局复用类（类似 Tailwind 的 @layer components） #

如果你偏好类似 Tailwind 全局类的写法，可以通过 Tailwind 配置文件扩展自定义组件类：

在 tailwind.config.js 中添加插件扩展：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [
    function({ addComponents }) {
      addComponents({
        '.select2-dropdown': {
          className: 'rounded-b-lg shadow-md',
        },
        '.select2-search': {
          className: 'border border-gray-300 rounded',
        },
        '.select2-results__group': {
          className: 'text-lg font-bold text-gray-900',
        },
      });
    }
  ],
};

配置完成后，就可以在组件中直接使用这些自定义类名：

<View className="select2-dropdown">
  {/* 下拉内容 */}
</View>
<View className="select2-search">
  {/* 搜索框内容 */}
</View>
<Text className="select2-results__group">分组标题</Text>

3. 使用 StyleSheet + apply 函数 #

如果你习惯 React Native 原生的 StyleSheet 写法，也可以用 NativeWind 的 apply 函数把 Tailwind 样式转换为 StyleSheet 对象：

import { View, Text, StyleSheet } from 'react-native';
import { apply } from 'nativewind';

const styles = StyleSheet.create({
  select2Dropdown: apply("rounded-b-lg shadow-md"),
  select2Search: apply("border border-gray-300 rounded"),
  select2ResultsGroup: apply("text-lg font-bold text-gray-900"),
});

// 使用示例
<View style={styles.select2Dropdown}>...</View>
<View style={styles.select2Search}>...</View>
<Text style={styles.select2ResultsGroup}>...</Text>

内容的提问来源于stack exchange，提问作者Laspeed