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 根据文件 glob（文件路径的正则表达式）动态导入文件。

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

// metro.config.js

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

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

显著改进的错误处理

RN Storybook 7 修复了 Storybook 在故事出错时崩溃的问题。现在，我们每个故事都被包裹在一个错误边界中，错误会被捕获。请注意，您可能仍然需要关闭 RN 错误日志框。

增强的 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 sponsors 赞助我。