Storybook 模拟不同大小的设备

Storybook 是一个用于组件开发和 UI 测试的工具，可以帮助开发者构建和展示组件的不同状态以及在不同环境下的表现。

为了模拟不同大小的设备，可以使用 Storybook 提供的 addons、decorators 或者 Tools API。以下是几个可以实现该目标的示例方法：

使用 addons:

viewport addon：该插件允许在 Storybook 中模拟不同的视口和设备大小。可以通过在preview.js中引入插件，并配置不同的设备参数进行使用。

// preview.js
import { addParameters } from '@storybook/react';
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';

addParameters({
  viewport: {
    viewports: INITIAL_VIEWPORTS,
  },
});

// Button.stories.js
import React from 'react';
import { storiesOf } from '@storybook/react';

storiesOf('Button', module)
  .addParameters({
    viewport: {
      defaultViewport: 'iphonex',
    },
  })
  .add('Primary', () => <Button>Primary</Button>);

toolbars addon：该插件可以在 Storybook 工具栏中添加切换设备大小的按钮。

// preview.js
import { addParameters } from '@storybook/react';
import { TOOLBAR } from '@storybook/addon-toolbars';

addParameters({
  toolbars: {
    [TOOLBAR]: {
      title: 'Device',
      buttons: [
        {
          icon: 'globe',
          title: 'Desktop',
          onClick: () => {
            // 设置 viewport 大小
          },
        },
        {
          icon: 'tablet-alt',
          title: 'Tablet',
          onClick: () => {
            // 设置 viewport 大小
          },
        },
        // ...
      ],
    },
  },
});

使用 decorators:

使用@storybook/addon-viewport提供的withViewport装饰器，将组件包裹在一个具有指定 viewport 大小的容器中。

// Button.stories.js
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withViewport } from '@storybook/addon-viewport';

storiesOf('Button', module)
  .addDecorator(
    withViewport({
      viewport: {
        width: '320px',
        height: '568px',
      },
    })
  )
  .add('Primary', () => <Button>Primary</Button>);

使用 Tools API:

使用getStorybook和getStorybookUI方法创建自定义 Storybook UI，在 UI 上添加自定义按钮或控件来切换设备大小。

// App.js
import React from 'react';
import { getStorybookUI, configure } from '@storybook/react-native';

configure(() => {
  require('./stories');
}, module);

const StorybookUIRoot = getStorybookUI({ });

export default function App() {
  return <StorybookUIRoot />;
}

// Button.stories.js
import React from 'react';
import { storiesOf } from '@storybook/react-native';

storiesOf('Button', module)
  .add('Primary', () => <Button>Primary</Button>);