用Storybook建立一个React Native组件库

构建一个组件UI库是在整个组织或代码库中执行设计标准的一个好方法。然而，它可能会带来严重的技术障碍，特别是在大型库中，因为它很容易导致一个错综复杂、难以阅读的代码库。

值得庆幸的是，各种工具已经被开发出来，使组件库的构建过程更加容易。在这篇文章中，我们将看看一些使React Native中的组件库更容易构建的工具，主要是Storybook和Shopify Restyle。

React Native让使用React和Javascript创建跨平台和强大的移动应用变得比以往任何时候都更容易。在大量的社区支持下，React Native也有一个健康的插件和工具的生态系统，使软件开发人员更容易编写可扩展的移动应用程序。

首先，我们将看看Storybook和它能为软件开发者做什么，然后深入到使用Storybook和一个伟大的UI库Shopify Restyle在React Native中创建一个非常基本的组件库。在本指南的最后，你将创建并记录下按钮和文本组件。

什么是Storyboook？

为了理解Storybook是什么，我们首先要介绍一下组件库到底是什么。

组件库是一个预制的UI组件的集合，整个组织可以在多个项目或屏幕上重复使用。组件库为产品团队节省了时间，并使单元测试和单独查看应用程序的部分变得更加容易。

Storybook是一个开源的工具，用于孤立地构建和记录UI组件。它使创建和测试UI组件的过程更加简单。

例如，在创建一个登录页面时，你可能会有几个基础组件，如按钮、输入和文本。这些组件中的每一个都可以被制作成一个可重复使用的组件，然后用Storybook来记录。

像谷歌和Atlassian这样的公司的软件团队使用Storybook来记录整个组织的组件库，以制作可重复使用和可共享的代码库。

React Native和Shopify Restyle

Shopify Restyle是React Native的一个开源的风格化解决方案。

来自Restyle文档。

Restyle库为在React Native中使用TypeScript构建UI组件提供了一个类型强化系统。它是一个构建UI库的库，以主题性为核心重点。

使用Restyle，可以很容易地建立围绕一个中心主题构建的组件。这个主题与组件的样式和道具相连，允许你访问一些东西，比如从道具中设置间距或颜色。

例如，为了给一个按钮组件设计一个特定的颜色，Restyle让你很容易地构建按钮，这样你就可以使用<Button color="primary400" /> ，而不是手动输入一个十六进制值。

Restyle的核心是一个theme 对象，你可以定义它来包含你所有组件的颜色、尺寸、间距和默认样式。它还提供了两个预置的组件--Box 和Text ，以使它真正容易建立更大的组件。

设置项目

让我们深入研究在React Native中实际建立我们的组件库。在本教程中，我们将使用Expo来简化，并使用Typescript来利用Restyle提供的强大类型。我已经创建了一个Repo，其中有跟随这个项目的提交，你可以在这里查看。

首先，让我们在当前目录下初始化一个新的Expo项目。

npm i -g expo-cli && expo init -t expo-template-blank-typescript

这将提示你应用程序的名称，然后为我们的新应用程序创建所有的文件并安装基本的依赖。

然后，我们将安装Storybook和Restyle的依赖项。

# Setup Storybook for React Native
npx -p @storybook/cli sb init --type react_native

# Install storybook loader to autoload stories
yarn add -D react-native-storybook-loader 

接下来，在你的package.json 中添加以下内容，以运行storybook加载器。

{
  "scripts": {
    "prestorybook": "rnstl"
  }
}

最后，更新你的应用程序入口点（App.tsx ）以使用Storybook。

// App.tsx
import React from 'react';

export { default } from './storybook';

现在，用yarn storybook 来启动故事书服务器，用yarn ios 来启动开发服务器（如果你运行的是安卓模拟器，则用yarn android 。

\

你应该看到上述屏幕。如果你没有，请关闭所有正在运行的进程，然后再次启动storybook 和开发服务器。

祝贺你!你现在有一个用Storybook设置的世博项目了!

让我们看一下我们的文件。如果你看一下根目录，你会看到一个新的文件夹叫storybook ，有一个子文件夹叫stories 。这就是配置故事书和故事的地方。

在上面的故事书网页中，你可以看到我们有两个故事，Button 故事和两个变体，with text 和with some emoji ，然后是Welcome 故事和变体to Storybook 。

现在让我们开始使用Restyle建立我们自己的组件库吧!在接下来的部分，我们将设置Restyle主题，然后使用Box 和Text 组件建立一个新的Button 组件。

配置Restyle

首先，安装Restyle：yarn add @shopify/restyle 。

接下来，我们将为我们的应用程序设置一个核心主题。

创建一个新的文件，src/theme.ts ，并把下面的内容放在里面。

// src/theme.ts

import { createTheme } from '@shopify/restyle'

const palette = {
  purpleLight: '#8C6FF7',
  purplePrimary: '#5A31F4',
  purpleDark: '#3F22AB',

  greenLight: '#56DCBA',
  greenPrimary: '#0ECD9D',
  greenDark: '#0A906E',

  black: '#0B0B0B',
  white: '#F0F2F3',
};


const theme = createTheme({
  colors: {
    primary: palette.purplePrimary,
    ...palette
  },
  spacing: {
    s: 8,
    m: 16,
    l: 24,
    xl: 40,
  },
  breakpoints: {
    phone: 0,
    tablet: 768,
  },
});

export type Theme = typeof theme;
export default theme;

然后，通过更新App.tsx ，将你的应用程序包裹在Restyle主题提供者中。

// App.tsx

import React from 'react';
import {ThemeProvider} from '@shopify/restyle';

import Storybook from './storybook';
import theme from './src/theme';

const App = () => (
  <ThemeProvider theme={theme}>
    <Storybook/>
  </ThemeProvider>
);

export default App;

如果你重新启动你的应用程序，你可能会注意到没有变化，但是我们已经成功地配置了我们的应用程序来使用Restyle!现在让我们创建我们的Box,Text, 和Button 组件。

让我们用Bash创建我们的Components 文件夹。

mkdir -p ./src/Components

首先，让我们在src/Components/Box.tsx 创建我们的Box 组件。

// Box.tsx
import {createBox} from '@shopify/restyle';
import {Theme} from '../theme';

const Box = createBox<Theme>();

export default Box;

然后，我们的Text 组件在src/Components/Text.tsx 。

// Text.tsx
import {createText} from '@shopify/restyle';
import {Theme} from '../theme';

const Text = createText<Theme>();

export default Text;

最后，我们将在src/Components/Button.tsx 中创建我们的Button 组件。

// Button.tsx
import React from "react";
import { BoxProps, TextProps } from "@shopify/restyle";
import { ActivityIndicator, TouchableHighlight } from "react-native";
import { Theme } from "../theme";
import Box from "./Box";
import Text from "./Text";

type ButtonProps = {
  onPress: () => void;
  loading?: boolean;
  textProps?: TextProps<Theme>;
} & Partial<BoxProps<Theme>>;

const Button: React.FC<ButtonProps> = ({
  children,
  onPress,
  loading,
  textProps,
  ...props
}) => (
  <TouchableHighlight underlayColor="transparent" onPress={onPress}>
    <Box
      py="m"
      px="xl"
      backgroundColor="primary"
      borderRadius={8}
      shadowOffset={{ height: 2, width: 0 }}
      shadowRadius={5}
      shadowColor="black"
      shadowOpacity={0.2}
      {...props}
    >
      {loading ? (
        <ActivityIndicator color="white" />
      ) : (
        <Text color="white" {...textProps}>
          {children}
        </Text>
      )}
    </Box>
  </TouchableHighlight>
);

export default Button;

现在，让我们指出我们的Box 和Text 组件所做的一些了不起的事情。注意我们是如何在我们的Box 组件中使用像py 和backgroundColor 这样的道具的。我们正在传入我们在主题中定义的值，如m ，用于间距，或primary ，用于我们的按钮颜色，这非常酷

现在我们已经建立了这些组件，让我们在src/Components/index.ts 中导出所有这些组件。

// index.ts
export { default as Button } from './Button';
export { default as Text } from './Text';

现在，让我们更新我们的故事，以便我们能在Storybook中看到这些。

首先，我们将删除storybook/stories/Welcome 和storybook/stories/Button ，以摆脱这个我们不需要的故事，并更新storybook/stories/index.js ，使之成为*import* './Button.stories'; 。

创建storybook/stories/Button.stories.js 。

// Button.stories.js

import React from 'react';
import { action } from '@storybook/addon-actions';
import { text } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react-native';
import { Button, Text } from '../../src/Components';
import CenterView from './CenterView';

storiesOf('Button', module)
  .addDecorator((getStory) => <CenterView>{getStory()}</CenterView>)
  .add('with text', () => (
    <Button onPress={action('clicked-text')}>
      <Text>{text('Button text', 'Hello Button')}</Text>
    </Button>
  ))
  .add('with some emoji', () => (
    <Button onPress={action('clicked-emoji')}>
      <Text>😀 😎 👍 💯</Text>
    </Button>
  ))
  .add('loading', () => (
    <Button onPress={action('loading')} loading>
      <Text>Test</Text>
    </Button>
  ));

现在，如果你看一下我们的故事书，你应该看到一些漂亮的按钮!

结论

现在，你有了一个用Expo、Storybook和Restyle构建的基本组件库如果你想了解更多关于Restyle的信息，我推荐你阅读Restyle文档。你也可以在这里找到完成的代码库。

The postBuild a React Native component library with Storybookappeared first onLogRocket Blog.