如何在 React Native 中使用 Tailwind CSS？-JavaScript中文网-JavaScript教程资源分享门户

在现代的前端开发中，UI库和样式的库很受欢迎。Tailwind CSS 是一款快速开发实用且自定义程度极高的CSS框架，可以帮助开发者在几乎没有CSS代码的情况下快速搭建出漂亮的界面。在React Native中使用Tailwind CSS，也是很有实际意义的。

Tailwind CSS 是什么？

Tailwind CSS 是一款实用的CSS工具包。与其它的CSS框架不同，它并不预先将许多CSS类库写好并编译好，而是提供了非常有用而且量身定做的CSS类库，开发者可以根据需要灵活的自定义所用的类库，并获得最佳的性能。

Tailwind CSS 推崇的是“原子”思想，即通过设置独立的属性值，快速组合构建复杂的样式。这种方式虽然比较直接，但需要集中精力去掌握和理解，才能最大化地利用它的优势。

在 React Native 中使用 Tailwind CSS

在 React Native 中，缺少对CSS的完全支持，这使得使用Tailwind CSS时需要采取一些技巧。幸运的是，Tailwind CSS官方为React Native提供了解决方案。

该方案包括两个库：tailwind-react-native-classnames和tailwind-react-native-stylesheet。以此，我们可以轻松地在React Native中使用 Tailwind CSS。

npm install --save tailwind-react-native-classnames tailwind-react-native-stylesheet

Tailwind CSS 类名

Tailwind CSS 的类名是很容易使用的，因为它们由基本的属相（如：text、bg、border）和属性（如：color、size、padding）组成，以连字符（-）连接。例如：text-red-500表示文字颜色为500级的红色，而bg-blue-200表示背景颜色为200级的蓝色。这样的方式可以让您快速构建各种设计元素。现在，我们可以使用 tailwind-react-native-classnames 库来将Tailwind CSS类转换为 React Native 样式表。

// javascriptcn.com 代码示例
import React from 'react'
import tw from 'tailwind-react-native-classnames'
import { View, Text } from 'react-native'

export default function App() {
  return (
    <View style={tw('flex items-center justify-center bg-white')}>
      <Text style={tw('text-3xl font-bold text-red-500')}>Hello World</Text>
    </View>
  )
}

在上面的代码中，我们将 flex items-center justify-center bg-white 与 text-3xl font-bold text-red-500 一起传递给 tw方法。这将返回一个具有React Native风格的样式对象。然后我们可以将样式绑定到组件上。

Tailwind CSS 样式表

另一种在React Native中使用Tailwind CSS的方式是使用tailwind-react-native-stylesheet库以使用完整的 CSS 样式表构建我们的设计元素。

// javascriptcn.com 代码示例
import { StyleSheet } from 'react-native'
import { tailwind } from 'tailwind-react-native-stylesheet'

const styles = StyleSheet.create({
  container: [
    tailwind('bg-white flex items-center justify-center'),
  ],
  text: [
    tailwind('text-3xl font-bold text-red-500')
  ]
})

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello World</Text>
    </View>
  )
}

在这个例子中，我们创建了一个具有两个键值（ container 和 text ）的样式表，然后使用tailwind类构造函数来定义样式库。这使我们可以在样式的构造函数中以及样式表中使用Tailwind CSS。

这种方式的优点是Reuse(复用)，因为我们可以预定义一个样式库，然后使用它来开发我们的组件。

总结

使用Tailwind CSS可以方便快捷的创建漂亮的和高性能的 React Native设计元素。在React Native中使用Tailwind CSS的方式非常灵活和容易使用，这使得开发者可以专注于构建界面的设计元素，而不是编写大量冗余样式代码。

此外，Tailwind CSS还具有其他高级功能，例如实用程序优化和CSS断点，以允许开发者很容易地优化他们的应用程序应对不同的屏幕尺寸和设备类型。

希望这篇文章能够帮助了解 React Native 和 Tailwind CSS的开发者，更深入的学习如何在React Native中使用Tailwind CSS，以便能够受益于它的许多优点。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6533eb3d7d4982a6eb7a4aee