如何使用多个自定义设置 nativewind 元素的样式 styles

Question

我想用我自己的具有某些属性的自定义类名来设计一个组件。 Tailwind 允许您通过 App.css 执行此操作，但在 React Native 应用程序中没有。 您如何将“.title”class 添加到具有某些属性的 tailwind 中？

.title {
    font-size: 24px
    font-weight: 800
}

将其应用于文本 JSX object：

<Text className="title">Title Text!</Text>

Answer 1

我想出了这种为多个相同组件设置样式的方法。 Nativewind 和 Tailwind 建议不要使用此方法，但它适用于两者。

在您的 tailwind.config.js 文件中，在您的 module.exports 上方添加以下代码行：

const plugin = require("tailwindcss/plugin");

module.exports = {...}

然后在你的插件列表中，添加：

plugin(function ({ addComponents }) {
        addComponents({
            ".title": {
                fontWeight: 800,
                fontSize: 24,
            },
        });
    }),

确保您的样式使用与 react-native 相同的属性名称，而不是 css（fontWeight 与 font-weight）。 重新启动服务器，它应该可以工作了！

Answer 2

您可以为此使用twrnc npm package。 从这里安装它。

在顶部的文件中像这样导入它。

import tw from "twrnc";

并像这样使用它

<Text style={tw` text-2xl font-extrabold`}>Title Text!</Text>