如何在React Native项目中实现Storybook嵌套组件目录结构

你可以直接保留原有Web端的组件+页面分层开发工作流，无需调整目录规划，仅通过Storybook配置即可实现你要的嵌套导航效果，操作步骤如下： #

1. 项目代码目录直接按照你预期的结构创建即可，不需要为适配Storybook做额外调整：

src/
├── Components/
│   ├── Buttons/
│   │   ├── Button 1
│   │   └── Button 2
│   └── Input Fields
│       ├── Input Field 1
│       └── Input Field 2
└── Pages/
    ├── Page 1
    │   ├── Sub Page 1
    │   └── Sub Page 2
    └── Page 2
    ...

2. 每个组件/页面对应的stories文件中，title字段用/符号分隔层级，即可在Storybook侧边栏自动生成嵌套分组，示例如下：

// Button 1 对应的 stories 文件
import Button1 from './index';

export default {
  title: 'Components/Buttons/Button 1',
  component: Button1,
};

export const 默认样式 = () => <Button1 />;

页面类stories同理，将title设置为Pages/Page 1/Sub Page 1即可。
3. 最后在Storybook配置文件（一般为.storybook/main.js）中匹配你所有的stories文件路径：

module.exports = {
  stories: [
    '../src/Components/**/*.stories.@(js|jsx|ts|tsx)',
    '../src/Pages/**/*.stories.@(js|jsx|ts|tsx)'
  ],
  // 其余原有配置保持不变
};

配置完成后重启Storybook，侧边栏就会完全按照你想要的嵌套结构展示组件和页面，和Web端的开发流程完全对齐。

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