如何在create-react-native-library创建的RN包中集成Storybook？

你遇到的Cannot find module 'react-dom/package.json'错误，是因为安装了Web版的Storybook（--type react），而React Native环境并不依赖react-dom。下面是正确的集成步骤：

1. 清理错误的Web版Storybook #

• 删除项目根目录下的.storybook文件夹
• 打开根目录的package.json，移除所有@storybook/react、@storybook/cli等Web版Storybook相关依赖
• 执行yarn install或npm install更新依赖

2. 在示例项目中安装React Native版Storybook #

组件包本身是库代码，Storybook需要集成在examples目录的RN示例应用中：

• 进入示例项目目录：

  cd examples
  

• 安装RN版Storybook：

  npx sb init --type react_native
  

• 安装依赖：

  yarn install
  

3. 配置Storybook引用组件包 #

• 编辑examples/.storybook/main.js，添加组件包的Story文件路径：

  module.exports = {
    stories: [
      '../src/**/*.stories.?(ts|tsx|js|jsx)',
      // 引入组件包中的Story文件
      '../../src/**/*.stories.?(ts|tsx|js|jsx)'
    ],
    addons: [
      '@storybook/addon-ondevice-controls',
      '@storybook/addon-ondevice-actions',
    ],
  };
  

• 在组件包的src目录下创建组件的Story文件，比如Button.stories.tsx：

  import React from 'react';
  import { Button } from './Button';
  
  export default {
    title: 'Button',
    component: Button,
  };
  
  const Template = (args) => <Button {...args} />;
  
  export const Primary = Template.bind({});
  Primary.args = {
    title: 'Primary Button',
    onPress: () => alert('Pressed'),
  };
  

4. 运行Storybook #

• 在examples目录下启动Storybook：

  yarn storybook
  

• 启动RN Metro服务器：

  yarn start
  

• 运行示例应用到模拟器/真机，即可在应用内看到Storybook的组件预览界面

内容的提问来源于stack exchange，提问作者Theo Itzaris