React Native Storybook 7

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

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

📖 Storybook 7 兼容性
🧩 改进的组件故事格式 3 支持
🔒 TypeScript优先
💨 自动故事加载
🛡️ 改进的错误处理
📝 增强的 Markdown 支持
🎛️ 控件自动生成

Storybook 7 兼容性

Storybook 7 彻底改进了其核心数据结构以优化打包，从而实现了代码分割和延迟编译。这也使得代码更容易在非 Web 环境中复用。

尽管 RN Storybook 6.5 与核心共享了许多代码，但 RN Storybook 7 完全基于核心。这意味着 RN Storybook 将在核心改进可用时继承这些改进，并使得 RN Storybook 在未来更容易跟上核心的步伐。剧透警告：Storybook 8 即将发布。敬请期待！

改进的组件故事格式 3 支持

RN Storybook 7 的故事现在看起来与 Storybook 核心完全相同。故事类型现在直接派生自 @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;

自动故事加载

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

在 RN Storybook 6 中，每次添加故事时都必须运行 storybook-generate。现在，借助 require.context，您只需在更新 main.ts 的 stories 字段时运行生成即可。这是因为 require.context 基于文件通配符（文件路径的正则表达式）动态导入文件。

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

// metro.config.js

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

在我的 Dev.To 上阅读更多相关内容.

显著改进的错误处理

RN Storybook 7 修复了故事出错时 Storybook 崩溃的问题。现在，我们将每个故事包装在一个错误边界中，从而捕获这些错误。请注意，您可能仍需要关闭 RN 错误日志框 (LogBox)。

增强的 Markdown 支持

过去，Notes 插件会在错误的位置断开文本，并且行为不如预期。RN Storybook 7 用一个经过更多实战检验的替代方案 react-native-markdown-display 替换了 markdown 渲染器，其效果显著提升！

控件自动生成

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 赞助 来考虑赞助我。