如何在反应原生故事书中添加全局装饰器答案

【问题标题】：How to add global decorator in react native storybook如何在反应原生故事书中添加全局装饰器
【发布时间】：2021-05-29 06:20:03
【问题描述】：

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

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

【问题讨论】：

标签： reactjs react-native storybook

【解决方案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;;

【讨论】：

【解决方案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 组件（而不是其他示例声称的包装器函数），它将渲染，其 props 是在运行时对单个故事的引用。

【讨论】：