介绍一下Zephyr用于React Native的Tailwind CSS（附代码）

前端小工
139 阅读8分钟

用普通的CSS构建复杂的网络应用可能是一项艰巨的挑战。因此，开发人员倾向于选择流行的造型库，如Bootstrap和Tailwind CSS，以增加开发周期。

与网页上的造型类似，使用React Native中的内置造型功能也是一个缓慢而费力的过程。React Native有类似于Bootstrap和Tailwind CSS的解决方案，React Native Zephyr就是这样一个解决方案。React Native Zephyr是一个受Tailwind CSS启发的造型库，旨在提高你的开发速度，更快地交付React Native应用程序。

它还将Tailwind CSS的经验带到了React Native。如果你熟悉Tailwind CSS，你可以很容易地接受Zephyr，因为两者之间有相似之处。本文将向你介绍React Native Zephyr的主要功能。

什么是React Native Zephyr？

React Native Zephyr是一个受Tailwind CSS启发的React Native样式库。它在React Native的背景下实现了Tailwind CSS的一些核心思想，没有任何本地依赖。

虽然在写这篇文章的时候还在积极开发中，但以下是React Native Zephyr的一些关键功能：

  • 它提供了一套方便的内置造型工具，开箱即用
  • 它有一个可扩展的默认主题
  • 它支持开箱即用的黑暗模式

上述功能使React Native Zephyr成为其他库中内置造型功能的更好选择。上面的功能绝不是全部，我建议查看官方文档以了解React Native Zephyr的更多内置功能。

React Native的造型功能并不直接与网页兼容。因此，可能很难将你的专注于网络的造型解决方案，如Bootstrap和Tailwind CSS直接转移到React Native。然而，你的一些Tailwind CSS技能是可以转移到React Native Zephyr的，因为这两个库有相似之处。

如果你有一个现有的React Native项目，你可以像这样从npm包注册处安装React Native Zephyr：

sh
# Using npm
npm i react-native-zephyr

# Using yarn
yarn add react-native-zephyr

# Using pnpm
pnpm add react-native-zephyr

如何使用React Native Zephyr

React Native Zephyr在引擎盖下使用StyleProvider 组件，用于管理你的应用程序的颜色方案等。要开始使用react-native-zephyr ，请导入StyleProvider 组件并将你的应用程序包裹在其中：

js
import { StyleProvider } from "react-native-zephyr";
export const App = () => (
  <StyleProvider>
    { /* The rest of your app goes here */}
  </StyleProvider>
);

React Native Zephyr导出了createStyleBuilder 函数，用于生成核心的样式设计工具。调用createStyleBuilder 将返回styles,useStyles, 和makeStyledComponent 实用函数。这些造型工具函数提供了React Native Zephyr的不同造型方法。

为了便于维护，React Native Zephyr建议创建一个专门的实用程序文件来管理你的风格化实用程序。下面的代码显示了React Native Zephyr的基本风格化实用程序文件：

js
import { createStyleBuilder } from "react-native-zephyr";
export const { styles, useStyles, makeStyledComponent } = createStyleBuilder();

createStyleBuilder 函数也需要一个可选的参数，尽管我们在上面的例子中没有传递它，你可以用它来覆盖或扩展默认的主题。如果你像我们一样调用createStyleBuilder ，没有参数，React Native Zephyr将使用默认主题。我们将在接下来的章节中学习如何覆盖和扩展默认主题。

你可以从这个实用程序文件中导出你需要的东西到你的应用程序的其他组件中。如上面的例子所示，核心的造型实用工具是styles 和makeStyledComponent 函数以及useStyles 钩子。

如何使用React Native Zephyr中的样式设计方法

如上一节所述，React Native Zephyr建议创建一个专门的styles.js 实用程序文件来管理其实用程序功能。调用createStyleBuilder 函数会返回styles 和makeStyledComponent 函数以及useStyles 钩子。你可以从styles.js 文件中导出这些实用功能到你应用中需要它们的组件：

js
import { createStyleBuilder } from "react-native-zephyr";
export const { styles, useStyles, makeStyledComponent } = createStyleBuilder();

styles 函数接收一个React Native Zephyr类名称的数组，并返回一个React Native样式对象。你作为参数传递的类名是来自你的主题和处理程序。你可以像这样使用styles 函数：

js
export default function App() {
  return (
    <View style={styles("flex:1", "bg:black")} >
      <Text style={styles("color:white", "text:5xl")}>
        Hello World
      </Text>
    </View>
  );
}

请注意，styles 函数没有开箱即用的对黑暗模式的支持。因此，它只适用于一次性的样式。

你也可以使用React Native Zephyr中的makeStyledComponent 包装器进行样式设计。顾名思义，makeStyledComponent 是一个用于制作风格化组件的实用函数。makeStyledComponent 这个实用函数将一个Component作为参数，并将class 和darkClass 道具添加到该Component。它返回被包装好的组件，你可以向其传递样式类。

正如上面所建议的，最好是在你的styles.js 文件中创建风格化的组件，并像这样导出它们：

js
export const StyledText = makeStyledComponent(Text);
export const StyledView = makeStyledComponent(View);

useStyles 钩子内部使用styles 方法。与styles 方法不同，useStyles 钩子有对黑暗模式的支持。像其他React钩子一样，你只能将useStyles 钩子与功能组件和另一个钩子一起使用。它返回一个你可以传递给React Native元素的样式对象。

下面的代码演示了你如何使用useStyles 钩子：

js
export default function App() {
  const wrapperStyles = useStyles({
    classes: ["flex:1", "bg:black"],
  });
  const textStyles = useStyles({
    classes: ["color:white", "text:5xl"],
  });
  return (
    <View style={wrapperStyles}>
      <Text style={textStyles}>Hello World</Text>
      <StatusBar style="auto" />
    </View>
  );
}

React Native Zephyr中的默认主题

React Native Zephyr有一个默认的主题，你无需配置就可以使用--我们从一开始就在使用它。默认主题从Tailwind CSS中的默认主题中汲取灵感；如果默认主题不能满足你的需求，你也可以扩展它。

默认主题带有几个造型约束；React Native Zephyr使用它们来生成造型类。

当你像下面的例子一样把pl:56 样式应用到一个元素上时，React Native Zephyr会添加224px 的左侧填充。在pl:56 样式类中，pl 是paddingLeft 属性，56 是一个默认的主题间距约束，当React Native Zephyr把样式转换为React Native 样式对象时，其大小为224px 。文档中有一个完整的默认主题约束和它们相应的尺度的列表：

js
<StyledText classes={["pl:56"]}>Hello World</StyledText>

React Native Zephyr使用spacing 约束来生成margin、padding和sizing样式类。默认主题包括其他几个约束，如opacities 和letterSpacing 约束。

在React Native Zephyr中扩展和覆盖默认主题

虽然它有一个默认的主题，但React Native Zephyr允许你扩展和覆盖其默认主题。前面一个章节中介绍的createStyleBuilder 函数需要一个可选的对象作为参数。该对象有overrideTheme 和extendTheme 属性，分别用于覆盖和扩展默认主题。这两个属性的值可以是对象，也可以是函数。

如果你把overrideTheme 属性的值设置为一个对象，就像下面的例子，React Native Zephyr将覆盖默认主题中的颜色。dark,light, 和brandColorPalette 的颜色将覆盖下面例子中的默认颜色：

js
export const { makeStyledComponent, styles, useStyles } = createStyleBuilder({
 overrideTheme: {
  colors: {
    dark: "#737373",
    light: "#e5e5e5",
    brandColorPalette: "#a1323e",
  }
 }
});

你可以将overrideTheme 属性的值设置为一个返回主题约束对象的函数，如下面的代码。当你将overrideTheme 属性的值设置为一个函数时，你就可以访问基本字体大小：

js
export const { makeStyledComponent, styles, useStyles } = createStyleBuilder({
  baseFontSize: 18,
  overrideTheme: ({ baseFontSize }) => {
    return {
      colors: {
        dark: "#737373",
        light: "#e5e5e5",
        brandColorPalette: "#a1323e",
      },
      spacing: {
        enormous: baseFontSize * 100,
      },
    };
  },
});

在上面的例子中，React Native Zephyr将用你在自定义主题中提供的颜色和间距覆盖默认主题中的颜色和间距。

你可以类似地使用extendTheme 。与overrideTheme 属性不同，extendTheme 属性扩展了默认主题，而不是覆盖它：

js
export const { makeStyledComponent, styles, useStyles } = createStyleBuilder({
  extendTheme: {
    colors: {
      brandColorPalette: "#a1323e",
    },
  },
});

如果你想访问基本字体大小，你也可以像这样把extendTheme 属性的值设置为一个返回对象的函数：

js
export const { makeStyledComponent, styles, useStyles } = createStyleBuilder({
  baseFontSize: 12,
  extendTheme: ({ baseFontSize }) => {
    return {
      spacing: {
        enormous: baseFontSize * 100,
      },
      colors: {
        brandColorPalette: "#a1323e",
      },
    };
  },
});

结论

像Bootstrap和Tailwind CSS这样的造型解决方案很受欢迎，因为它们提高了开发速度。React Native Zephyr试图将Tailwind CSS的体验带到React Native，如果你已经熟悉了Tailwind CSS，那么拿起它很容易。

React Native Zephyr带有一个默认的主题，提供了一套慷慨的数值，可以让你出发。如果默认主题不能满足你的需求，你可以按照文章中的描述扩展或覆盖它。虽然在写这篇文章的时候还很年轻，但它值得探索React Native Zephyr。希望你会发现它对你的项目有用。

React Native Zephyr有几个功能我们在这篇文章中没有涉及。请查看官方文档以了解更多的功能。请在下面的评论区告诉我你的想法。

avatar
文章
阅读
粉丝