如何为@storybook/react-native配置全局装饰器

React Native 版 Storybook 提供了和web端对齐的全局配置能力，两种实现方案如下：

方案1：入口文件直接配置（兼容所有版本） #

直接在Storybook入口文件调用全局addDecorator方法，所有故事都会自动应用该装饰器，无需单独配置每个故事：

• 找到项目中的Storybook入口文件，默认路径为.storybook/index.js（部分旧版本项目可能放在根目录storybook/index.js）
• 引入ThemeProvider后添加全局装饰器即可，示例代码如下：

// .storybook/index.js
import { AppRegistry } from 'react-native';
import { getStorybookUI, configure, addDecorator } from '@storybook/react-native';
// 替换为你项目中ThemeProvider的实际路径
import ThemeProvider from '../src/config/ThemeProvider';
import './rn-addons';

// 全局注册ThemeProvider装饰器
addDecorator(StoryComponent => (
  <ThemeProvider>
    <StoryComponent />
  </ThemeProvider>
));

// 原有故事加载逻辑保持不变
configure(() => {
  require('./stories');
}, module);

const StorybookUI = getStorybookUI({});
AppRegistry.registerComponent('YourAppName', () => StorybookUI);
export default StorybookUI;

方案2：preview.js配置（适用6.x及以上版本） #

6.x以上版本的@storybook/react-native已经支持和web端一致的preview.js全局配置方式：

• 在.storybook目录下新建preview.js文件
• 导出decorators数组配置全局装饰器，示例代码如下：

// .storybook/preview.js
// 替换为你项目中ThemeProvider的实际路径
import ThemeProvider from '../src/config/ThemeProvider';

export const decorators = [
  StoryComponent => (
    <ThemeProvider>
      <StoryComponent />
    </ThemeProvider>
  )
];

两种方案均会自动对所有故事生效，无需再单独给每个故事调用addDecorator方法。

内容的提问来源于stack exchange，提问作者Cristian Flórez