使用className管理库设置NativeWind

Question

我正在开发一个 React Native with Expo 项目。我想像通常使用 Tailwind 一样设置 NativeWind。通常，我安装这些库：

clsx

和

tailwind-merge

。然后我用它们创建了一个合并样式的函数：

import clsx, { ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs));
}

有没有办法使用这些库的本机版本来复制它（如果有）？

Answer 1

你只需要安装clsx

npm install --save clsx

然后导入它

import clsx from "clsx";

最后你使用它了

className={clsx(
    "p-4 border border-white rounded-lg shadow-sm bg-elementBackground shadow-defaultText",
    extraClassName
  )}

请记住，如果您创建一个名为“className”的道具，它将不起作用，您需要一个不同的名称。

对于 prop 的类型，可以是字符串或者类似的东西

  extraClassName?: TouchableOpacity["props"]["className"];