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

Question

在ReactJs项目中，您可以使用.storybook/preview.js文件添加全局装饰器和参数。如何实现同样的行为@storybook/react-native？

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

Answer 1

在 Storybook 自己的文档中找到了更新的答案。

// .storybook/preview.js

import React from 'react';

export const decorators = [
  (Story) => (
    <div style={{ margin: '3em' }}>
      <Story />
    </div>
  ),
];

Answer 2

编辑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;;