如何在 Storybook 中添加全局装饰器

Question

在 ReactJs 项目中，您可以使用 .storybook/preview.js 文件来添加全局装饰器和参数。如何使用 @storybook/react-native?

实现相同的行为

我需要的是用 ThemeProvider 包装我所有的故事，但我发现的独特方法是用 .addDecorator() 包装单个故事。

Answer 1

编辑 storybook/index.js，在其上使用 addDecorator。

示例：

import React from 'react'
import { getStorybookUI, configure, addDecorator } from '@storybook/react-native'
import Decorator from './Decorator'


addDecorator(storyFn => (
  <Decorator>
    {storyFn()}
  </Decorator>
))

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


const StorybookUI = getStorybookUI({ onDeviceUI: true })
export default StorybookUI;;

Answer 2

截至 2021 年 6 月，使用 storybook v5.3.25，以上答案无效。但是我设法找到了解决方案。

装饰器必须按以下格式添加到 storybook/index.js 文件中：

import { ThemeDecorator } from './storybook/ThemeDecorator';

addDecorator(withKnobs); // inbuilt storybook addon decorator
addDecorator(ThemeDecorator);// custom decorator

configure(() => {
  loadStories();
}, module);

在这种情况下，ThemeDecorator.js 是一个呈现您的故事的简单包装器组件，它看起来像这样：

import React from 'react';
import { Provider } from 'theme-provider';

export const ThemeDecorator = (getStory) => (
  <Provider>{getStory()}</Provider>
);

重要的是，addDecorator 函数需要一个 React 组件（而不是其他示例声称的包装函数），它将呈现，其道具是在运行时对单个故事的引用。

如何在 Storybook 中添加全局装饰器

How to add a global decorator in Storybook

storybook