为什么要将Tailwind CSS与React Native一起使用？

说到样式，React Native有一个相当好的位置。内置的StyleSheet方法允许你轻松地在JSX之外解耦样式。

坚持使用React Native通常是个好主意，然而它也不是没有缺陷。首先，在一些外部位置维护样式以重用它们会很困难。另一个问题是在整个代码库中管理适当的命名规则。这些问题可以通过在React Native中使用Tailwind来解决。

Tailwind CSS完全改变了结构化CSS的常见方法。在学习良好的代码实践时，开发人员很快就会明白关注点分离和在两个文件之间分割HTML和CSS的重要性。实用至上的CSS似乎完全不同。

虽然开发者社区对实用优先的CSS有一些不满，但很难不注意到Tailwind CSS正在流行起来。作为对其能力的证明，Tailwind在The State of CSS 2020调查中获得了最多采用的技术奖。

那么，所有的大惊小怪是怎么回事？

实用第一类的方法

在React Native中，实用优先类通过其类或样式属性将特定的CSS属性应用于一个元素。以前的方法是将样式对象应用于元素的内联，或者引用StyleSheet对象的键，并应用自定义名称。

实用至上的类方法允许你简单地给元素添加一个类名，而不需要编写自定义样式。实现颜色、排版和结构的决定，以及为每个风格化的元素提供一个有意义的名字，都已经做出了。

Tailwind在一个坚实的设计系统的基础上给你默认值，这导致了整个代码库的一致性。起初，学习曲线可能看起来很陡峭，但一个精通这种类型的风格化的开发人员能够以更快的速度和更统一的方式工作。此外，当一个团队使用一套精心策划的有限选项时，更容易加入一个新的开发人员，并保持你的风格设计方法的一致性。

最后，由于StyleSheets被重复使用，代码库将停止增长，因此更容易维护。

比较风格化组件的方法

由于许多原因，使用styled-components是一种很好的样式设计方法。然而，第一眼就不知道某个组件是React的还是哑巴风格的，真的会拖慢事情的发展。当我们创建永远不会被重用的组件时，也会出现过早抽象的情况。

考虑到内联风格

当涉及到与Tailwind类混合的代码时，一个缺点是我们的代码会很快变得冗长。通常，我们不惜一切代价避免内联样式，因为它们对代码的可读性有负面影响，并可能损害整体性能。有一些来自开发者社区的建议，StyleSheet方法比内联样式更有性能，因为它一次就把整个对象送过桥。这在React Native源代码中得到了进一步澄清。

在React Native中使用Tailwind

虽然有几个Tailwind包很适合React Native，但我选择使用 tailwind-react-native-classnames超过 tailwind-rn.tailwind-react-native-classnames 是基于Classnames，这是一个JavaScript工具，用于改进Web上的Tailwind代码，因此，使用Tailwind CSS的开发人员应该更熟悉。

你可以随意使用不同的库，但对我来说，标记的模板函数的方法比像.NET中传递给数组的样式更具有视觉吸引力。 [react-native-tailwindcss](https://github.com/TVke/react-native-tailwindcss).你也可以选择简单地将React Native组件从 [react-native-tailwind](https://www.npmjs.com/package/react-native-tailwind)库中导入React Native组件，并将类传递给className prop。

有两种方法可以使用tailwind-react-native-classnames 库将Tailwind类应用到元素中。基本的一种是使用ES6标记的模板函数，它简单地将类名包裹在反斜线中，就像下面的View 元素一样。第二种方法，使用Classnames包，允许组合类并处理更复杂的情况。在下面的Text 元素中注意到它。

import tw from 'tailwind-react-native-classnames';

const MyComponent = () => (
 <View style={tw`bg-blue-100`}>
   <Text style={tw.style('text-md', invalid && 'text-red-500')}>Hello</Text>
 </View>
);

复制代码

React Native特定的类

我们有两个React Native类，用于使用平台特定的样式，可以安全地使用标签模板功能。

tw`ios:pt-4 android:pt-2`;

复制代码

Tailwind类名

如果你看一下Tailwind主页左侧的菜单，你会看到几个部分。其中只有一些与React Native相关，但如果你已经知道如何在React Native中为组件设计样式，你会很快掌握你可以使用的内容。最值得你阅读的部分是。

• 布局：处理大小和位置等问题
• Flexbox：用Flexbox定位元素
• 间隔：填充物和边距的类
• 尺寸：宽度和尺寸类
• 排版：与字体、字母间距和文本有关的一切内容
• 背景：诸如背景颜色、图像和背景不透明度等类。
• 边框：半径、宽度和颜色类

还有效果部分，你可以找到不透明度，但也有可能使用类。tailwind-react-native-classnames在shadow ，它位于这部分的盒影部分。

我还发现这个小抄非常有用。当试图指定数值时，你可以检查元素属性的正确代码。例如，当你设置元素宽度时，你可以使用w- 类的名称，并设置数字w-40 ，得到160px。

比较StyleSheet和Tailwind CSS的方法

现在，让我们使用两种方法建立一个简单的布局，以比较Tailwind代码和React Native代码。对于这个例子，我决定用卡片创建ScrollView。一个选定的变量被传递给该组件，它决定了不同的背景和标题集的颜色。

这篇文章的整个代码例子位于Git仓库TailwindCssReactNative中。你也可以从Expo上运行这个例子。首先，我们将使用StyleSheet的方法构建上面的组件。

const ListItem = ({
 uri,
 selected = false,
 text=""
}) => {
 return (
   <View style={[styles2.container, { ...(!selected && { backgroundColor: '#FFFFFF'})}]}>
     <View style={styles2.logoBackground}>
       <Image
         style={styles2.logo}
         source={ uri }
       />
     </View>
     <Text style={[styles2.text, { ...(!selected && { color: 'black'})}]}>{ text }</Text>
     <TouchableOpacity style={styles2.button}>
       <Text style={styles2.buttonText}>Details</Text>
     </TouchableOpacity>
   </View>
 )
}

复制代码

正如你所看到的，有三个道具被传递：图片的uri ，卡片标题的text ，以及关于该组件是否被选中的信息。根据selected 是真还是假，有额外的样式被添加，如主视图中的backgroundColor 和Text 组件中的color 。

StyleSheet被用来设计这个组件的样式。

const styles2 = StyleSheet.create({
 container: {
   height: 256,
   width: 160,
   backgroundColor: 'rgba(59,130,246,1)',
   borderRadius: 12,
   padding: 15,
   margin: 5,
   alignItems: 'center',
   justifyContent: 'center',
   shadowColor: "#000",
   shadowOffset: {
     width: 0,
     height: 3,
   },
   shadowOpacity: 0.27,
   shadowRadius: 4.65,
   elevation: 6,
 },
 logoBackground:{
   width: 112,
   height: 112,
   borderRadius: 55,
   backgroundColor: '#E4F0FE'
 },
 logo: {
   width: 110,
   height: 110,
   borderRadius: 55
 },
 text: {
   color: 'white',
   fontSize: 18,
   fontWeight: 'bold',
   marginVertical: 10
 },
 button: {
   height: 40,
   width:'100%',
   backgroundColor: 'white',
   borderRadius: 20,
   alignItems: 'center',
   justifyContent: 'center',
   borderWidth: 1,
   borderColor: 'rgba(59,130,246,1)'
 },
 buttonText: {
   color: 'rgba(59,130,246,1)',
   fontSize: 17,
   fontWeight: 'bold'
 }
});

复制代码

现在，我们可以用Tailwind CSS方法和tailwind-react-native-classnames 库来构建同样的组件。

import React from 'react';
import { Text, View, TouchableOpacity, Image } from 'react-native';
import tw from 'tailwind-react-native-classnames';

export const ListItemTW = ({
 uri,
 selected = false,
 text=""
}) => (
 <View style={tw.style(
   'h-64 w-40 bg-blue-500 rounded-xl p-4 m-1 items-center justify-center shadow-lg',
   !selected && 'bg-white'
 )}>
   <View style={tw`w-28 h-28 rounded-full bg-indigo-50`}>
     <Image
       style={tw`w-28 h-28 rounded-full`}
       source={ uri }
     />
   </View>
   <Text style={tw.style(
     'text-white text-lg font-bold my-4',
     !selected && 'text-black'
   )}>
     { text }
   </Text>
   <TouchableOpacity
     style={
       tw`h-10 w-full bg-white rounded-full items-center justify-center border border-blue-500`
     }
   >
     <Text style={tw`text-lg text-blue-500 font-bold`}>
       Details
     </Text>
   </TouchableOpacity>
 </View>
)

复制代码

那么，有什么区别呢？请注意，Tailwind组件有36行，而使用StyleSheet的普通组件有76行。最大的缺点是，有几行长的代码。其中有两行甚至是多行的，原因是使用Classname的tw.style ，将类与有条件地添加的样式连接起来。

使用预定义样式有其优点和缺点。如前所述，好处是开发时间更快，易于维护。最大的缺点是，如果你使用一些不常见的值，比如标准值中不包括的尺寸或颜色，你就必须定制你的样式。我认为最简单的方法是将样式对象传递给tw.style ，这样应该可以顺利识别。

总结

在你的项目中使用Tailwind CSS可以统一整个代码库。在StyleSheet中，你可以应用预定义列表中的类名，而不是给样式起自定义的名字，该列表已被许多开发者熟知。

此外，开发的速度应该会提高，因为它更容易为组件设置样式，并评估哪些样式应用于特定的元素。这种方法也有它的缺点，比如使一些组件过于冗长。我相信这些问题可以通过将一些较长的、可重复使用的部分作为样式化的组件导出，或者将它们导出到外部文件中来解决，但这要看你如何决定你的项目的最佳方法。

The postWhy you should use Tailwind CSS with React Nativeappeared first onLogRocket Blog.