在 React Native 项目中，twrnc 是一个允许开发者使用类似于 Tailwind CSS 的样式库来简化样式编写的工具。twrnc 能让开发者使用 Tailwind CSS 的类名来快速定义样式，而不需要手动创建复杂的 StyleSheet 对象，从而提高了开发效率和样式的可读性。
什么是 twrnc
twrnc 是一个轻量级的 React Native Tailwind 样式库，它结合了 Tailwind CSS 的灵活性和 React Native 样式的优化。使用这个库，可以通过类名来定义样式，避免了手写样式表的重复性工作。
tailwind-rn 和 twrnc 都是常见的 Tailwind 风格的工具库，但 twrnc 具有更灵活的特性，如动态样式、轻松定制、以及无需额外构建工具的配置。
首先我们需要先安装 twrnc：
pnpm add twrnc
安装完成后，你可以在项目中导入 twrnc，并直接在组件中使用类似于 Tailwind 的类名来设置样式。
基本使用
twrnc 的用法非常简单，它允许你通过类名快速设置组件样式。以下是如何在 React Native 组件中使用 twrnc 的基本示例：
import React from "react";
import { Text, View } from "react-native";
import tw from "twrnc";
const App = () => {
return (
<View style={tw`flex-1 justify-center items-center bg-gray-100`}>
<Text style={tw`text-lg text-blue-500`}>Hello, World!</Text>
</View>
);
};
export default App;
tw 是 twrnc 创建的样式函数，你可以将 Tailwind 类名作为字符串传递给它，并将其返回的样式对象赋给 React Native 组件的 style 属性。
在上面的例子中，我们通过 twflex-1 justify-center items-center bg-gray-100 来为 View 组件添加了 flex 布局、垂直和水平居中对齐以及背景色的样式。
在 React Native 中，你可以用 twrnc 来轻松创建带有交互效果的按钮。
twrnc 可以通过 flex 类快速实现网格布局。
import React from "react";
import { Text, View } from "react-native";
import tw from "twrnc";
const App = () => {
return (
<View style={tw`flex-1 justify-center items-center`}>
<View style={tw`flex flex-wrap flex-row justify-around`}>
<View style={tw`w-32 h-32 bg-red-500 m-2 justify-center items-center`}>
<Text style={tw`text-white text-lg`}>Box 1</Text>
</View>
<View style={tw`w-32 h-32 bg-blue-500 m-2 justify-center items-center`}>
<Text style={tw`text-white text-lg`}>Box 2</Text>
</View>
<View
style={tw`w-32 h-32 bg-green-500 m-2 justify-center items-center`}
>
<Text style={tw`text-white text-lg`}>Box 3</Text>
</View>
<View
style={tw`w-32 h-32 bg-yellow-500 m-2 justify-center items-center`}
>
<Text style={tw`text-white text-lg`}>Box 4</Text>
</View>
</View>
</View>
);
};
export default App;
通过使用 flex-wrap 和 flex-row 类来创建水平的网格布局。每个盒子设置了相同的宽度、高度和不同的背景颜色，同时使用 m-2 来添加外边距，确保网格有良好的布局间距。
twrnc 不仅支持静态样式，还支持根据条件动态生成样式。这在处理响应式设计、状态变化等情况下非常有用。
import React, { useState } from "react";
import { Text, View, Button } from "react-native";
import tw from "twrnc";
const App = () => {
const [isBlue, setIsBlue] = useState(true);
return (
<View style={tw`flex-1 justify-center items-center`}>
<Text style={tw`${isBlue ? "text-blue-500" : "text-red-500"} text-lg`}>
Dynamic Color Text
</Text>
<Button title="Toggle Color" onPress={() => setIsBlue(!isBlue)} />
</View>
);
};
export default App;
我们根据 isBlue 状态的变化，动态应用不同的样式类名。isBlue 为 true 时，文本是蓝色的，isBlue 为 false 时，文本变为红色。
twrnc 提供了一种方法可以通过扩展 Tailwind 的配置文件来添加自定义样式。我们只需要在项目的根目录下创建一个 tailwind.config.js 文件，添加你需要的自定义样式配置。
module.exports = {
theme: {
extend: {
colors: {
customGreen: "#ff4438",
},
},
},
};
然后在代码中使用你定义的自定义类：
import React from "react";
import { Text, View } from "react-native";
import { create } from "twrnc";
import twConfig from "../../tailwind.config";
// 创建 tw 实例
const tw = create(twConfig);
const App = () => {
return (
<View style={tw`flex-1 justify-center items-center`}>
<Text style={tw`text-lg text-customGreen`}>
This is custom green text!
</Text>
</View>
);
};
export default App;
如果你使用了自定义的 Tailwind 样式（如自定义颜色、字体等），那么你就需要像你展示的那样，通过 create(twConfig) 传入自定义配置。
总结
twrnc 是一个专为 React Native 设计的工具，它将 Tailwind CSS 的实用性带入移动开发环境。通过简化的类名系统，开发者可以更快地构建具有一致风格的界面，同时避免了传统 CSS 的复杂性。它不直接支持浏览器媒体查询或动画功能，但通过与 React Native 的内置 API 或其他库结合，仍能实现复杂的布局和交互效果。twrnc 提供了类似 Tailwind 的开发体验，并且高度可定制，适合快速迭代和灵活的样式管理。
最后分享两个我的两个开源项目,它们分别是:
这两个项目都会一直维护的，如果你想参与或者交流学习，可以加我微信 yunmz777 如果你也喜欢,欢迎 star 🚗🚗🚗
