React Native Storybook 7

Storybook 是业界领先的开源工作台，用于隔离地开发、文档化和测试前端应用程序。它可以帮助您开发难以触及的状态和边缘情况，而无需运行整个应用程序。

今天，我们很高兴地宣布为 React Native 用户推出的最新主要版本：React Native Storybook 7！这使 RN Storybook 与核心 Storybook 7.6 对齐，增强了 @storybook/react 和 @storybook/react-native 之间的代码重用，并为未来更频繁和更精简的发布奠定了基础。

📖 Storybook 7 兼容性
🧩 改进了对 Component Story Format 3 的支持
🔒 TypeScript 优先
💨 自动加载 story
🛡️ 改进的错误处理
📝 增强的 markdown 支持
🎛️ 自动生成控件

Storybook 7 兼容性

Storybook 7 彻底修改了其核心数据结构以优化打包，从而实现了代码拆分和延迟编译。它还使代码更容易在 Web 上下文之外重用。

虽然 RN Storybook 6.5 与核心共享了许多相同的代码，但 RN Storybook 7 完全基于核心。这意味着 RN Storybook 将继承核心改进，并且更容易在未来跟上核心。 剧透警告：Storybook 8 即将到来。敬请关注！

改进了对 Component Story Format 3 的支持

RN Storybook 7 的 story 现在看起来与核心 Storybook 完全相同。Story 类型现在直接从 @storybook/react 派生。

import type { Meta, StoryObj } from "@storybook/react"
import Button from "./Button"

const meta = {
  component: Button,
} 
  
satisfies Meta<typeof Button>

export default meta;

type Story = StoryObj<typeof meta>;

export Basic: Story = {}

同时，您可以像核心 Storybook 一样使用相同的 StoryObj 和 Meta types。这遵循了对 CSF3 的改进支持，并提供了更强的类型安全性和自动完成。了解更多。

TypeScript 优先配置

TypeScript 已成为 Storybook 用户和 JS 生态系统中的首选语言。RN Storybook 7 也紧随其后，将所有配置文件和模板更新为 TypeScript 优先。

RN Storybook 7 的 main.ts

// .storybook/main.ts
import { StorybookConfig } from '@storybook/react-native';

const main: StorybookConfig = {
  stories: [
    '../components/**/*.stories.?(ts|tsx|js|jsx)',
  ],

  addons: [
    '@storybook/addon-ondevice-notes',
    '@storybook/addon-ondevice-controls',
    '@storybook/addon-ondevice-backgrounds',
    '@storybook/addon-ondevice-actions',
  ],
};

export default main;

自动加载 story

RN Storybook 7 利用 Metro 对 require.context 的新支持来自动化 story 加载，并大大减少了创建 story 所需的步骤。

在 RN Storybook 6 中，您每次添加 story 都必须运行 storybook-generate。现在，使用 require.context，您只需在更新 main.ts 的 stories 字段时才需要运行生成。这是因为 require.context 根据文件 glob（文件路径的正则表达式）动态导入文件。

此功能在 React Native 0.72 中添加。通过在 Metro 中启用 transformer.unstable_useRequireContext 来使用它

// metro.config.js

const config = {
  transformer: {
    unstable_allowRequireContext: true,
  },
}

在我的 Dev.To 上阅读更多关于此内容的信息.

显著改进的错误处理

RN Storybook 7 修复了 Storybook 在 story 错误时崩溃的问题。现在，我们将每个 story 包裹在错误边界中，以捕获这些错误。请注意，您可能仍然需要关闭 RN Error LogBox。

增强的 markdown 支持

过去，Notes 插件 会在错误的位置断开文本，并且行为不如您预期的那样。RN Storybook 7 将 markdown 渲染器替换为更经过实战检验的替代方案 react-native-markdown-display，它工作得更好！

自动生成控件

RN Storybook 7 现在使用 docgen 分析从类型自动生成控件！

通过将 babel-plugin-react-docgen-typescript 添加到您的 Babel 配置来配置自动生成的控件

开始使用

在现有项目中开始使用 RN Storybook 7，使用

npx storybook@latest init

如果您要创建一个新项目，请使用 Storybook 模板

# Expo
npx create-expo-app --template expo-template-storybook AwesomeStorybook

# React Native CLI
npx react-native init MyApp --template react-native-template-storybook

如何升级

此版本中存在一些重大更改。由于有很多内容需要了解，请查看完整的迁移指南。

下一步是什么？

RN Storybook 8 的工作已经在进行中。基本功能已经可用，但我们计划在未来几个月内进行更多改进。以下是您可以期待的内容

• 重新设计的 UI
• 改进的测试支持
• 更多控件类型，以更好地匹配 Web 体验
• …以及更多！

汇集在一起

此版本使 RN Storybook 与核心 Storybook 对齐，并为我们的下一个主要版本中的更多改进铺平了道路。

RN Storybook 项目仍然具有巨大的潜力，我们欢迎新的贡献者帮助我们实现目标。在此处查找该项目并分享您的反馈、兴趣或支持。

您可以在 Twitter 或 GitHub 上找到我。如果您想支持我的工作，请考虑通过 GitHub Sponsors 赞助我。