如何在 react-native 中创建嵌套的故事书结构？

Posted 2023-02-19

【中文标题】如何在 react-native 中创建嵌套的故事书结构？

【英文标题】：How to create a nested storybook structure in react-native?

【发布时间】：2021-11-19 13:46:50

【问题描述】：

我们正在我们的 React Native 项目中使用 Storybook，并且想知道如何组织我们的组件，因为嵌套结构 are not supported。在 Web 应用程序中，我们习惯于创建单独的组件并从中构建我们的“页面”。我们一直致力于为 React Native 应用程序提供类似的工作流程，但在实现它时遇到了麻烦。目标是这样的结构：

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
...

【参考方案1】：

正如您提到的，此功能尚未实现。但是，您可以通过使它们成为同一个故事的一部分，在某种程度上将它们组合在一起。

例如，如果您使用过

storiesOf("Buttons").add("button1")

你也可以这样做

storiesOf("Buttons").add("button2")

在另一个文件中，由于故事相同，它们将被分组在按钮下。

但是，目前还不能真正实现第三级嵌套。您可以开始所有页面故事，例如

storiesOf("Pages/Page1").add("SubPage1")

storiesOf("Pages/Page2").add("SubPage1")

然后，例如，每当您搜索 Page 时，它​​们应该一起出现。

我意识到它并不理想，但我在待办事项中将此功能添加到项目中。一旦 6.0 准备就绪，目标是引入分组功能，作为初始版本后第一个里程碑的增强功能。所以 6.1 可能是我所希望的。