React Native Storybook 8

Storybook 是构建、文档化和隔离测试 UI 组件的行业标准工作台。它不仅在构建 Web UX 方面无处不在，而且是 React Native 唯一的组件工作台，被 Amazon、Shopify、Brex、Wealthsimple、Kraken 以及全球许多其他移动团队使用。

在过去的五年中，我们努力缩小 React Native Storybook 和快速发展的 Web 版本之间的差距。今天，我很高兴地宣布，我们终于实现了这个重要的里程碑。React Native Storybook 8.3 是统一这两个项目的版本。

它包括

• 🤝 与 Web 统一的发布计划
• 📱 全新的移动 UI
• ↔️ 全新的宽屏布局
• ⚙️ 简化的 Metro 配置
• 🔁 改进的热重载
• 🏆 稳定的 React Native Web 支持

与 Web 统一的发布计划

在我们深入了解 8.3 的功能改进之前，为什么这个版本如此重要？这是 React Native (RN) Storybook 的首席维护者 Danny Williams 四年工作的结晶。

Danny 从 2020 年开始维护 React Native Storybook。他牺牲了多年的夜晚和周末，首先是为了维持项目的运转，然后是为了追求将 RN Storybook 与 Web 版本重新统一的艰巨任务。

在此期间，React Native Storybook 落后于 Web Storybook 一个主要版本。在像 Storybook 这样快速发展的项目中，这意味着 RN 用户获得的体验比 Web 用户差，并且同时使用 RN 和 Web 的团队受到版本限制。

现在不再如此了！RN Storybook 8.3 包含 Web 的所有关键核心功能。代码库允许 RN 和 Web 之间共享，这意味着我们的团队可以承诺确保 Web 主要版本在未来不会破坏 RN。这对项目来说是一个史诗般的里程碑。

全新的移动 UI

RN Storybook 8 中最显著的变化是全新的 UI，这是一个完整的改版，优化了 Storybook 的 UI 以适应移动设备。现在，导航侧边栏和插件面板都从页面底部弹出，使得用手机上的拇指轻松触发它们。与之前的版本不同，这些面板与 Storybook 的主要“画布”区域干净地共存。

自从在 Storybook 8 中引入以来，这对 Web 版 Storybook 来说是一个巨大的改进，但对于完全存在于移动设备上的 React Native 来说，它更具有重要意义。

全新的宽屏布局

React Native 也越来越多地用于平板电脑、桌面和 Web 应用程序。为了跟上步伐，我们引入了一个新的宽屏布局，与 Web 版 Storybook 的桌面布局相匹配。

简化的 Metro 配置

为了更清晰地配置 Storybook，我们为您的 Metro 配置引入了新的 withStorybook 包装器

// metro.config.js
const { getDefaultConfig } = require("expo/metro-config");
const withStorybook = require("@storybook/react-native/metro/withStorybook");

const defaultConfig = getDefaultConfig(__dirname);

module.exports = withStorybook(defaultConfig);

该包装器还接受一个选项对象来自定义行为。例如，如果您想在 RN Storybook 旁边启动一个 websocket 服务器，以便可以远程控制它（例如，通过 Storybook Web UI、VSCode 扩展或测试脚本）

// metro.config.js
const { getDefaultConfig } = require("expo/metro-config");
const withStorybook = require("@storybook/react-native/metro/withStorybook");

const defaultConfig = getDefaultConfig(__dirname);

module.exports = withStorybook(defaultConfig, {
  websockets: {
    port: 7007,
    host: 'localhost',
  },
});

您还可以使用选项来指定备用配置目录，或者根据环境变量完全禁用 Storybook。有关更多信息，请参阅文档。

改进的热重载

在旧版本中，RN Storybook 会热重载现有故事，并支持从现有故事文件中添加/删除故事。但是，添加和删除故事文件需要重启。

现在，由于 Metro 的改进，您现在可以添加和删除与 .storybook/main.js 中 stories globs 匹配的故事文件，Storybook 将自动拾取这些文件。

请注意，使用新的文件 globs 更新 main.js 仍然需要运行 storybook-generate 或重启 Metro。

React Native Web 是稳定的

为了庆祝我们的 React Native 8 发布，我们还修复了 React Native Web (RNW) Storybook（我们基于 Web 的 React Native 组件工作台）中的各种错误和兼容性问题。

如果您还不熟悉 RNW Storybook，它是 RN 版 Storybook 的绝佳补充。虽然 RN 作为原生应用程序在您的设备上运行，但 React Native Web 在 Web 浏览器内的 React DOM 中运行。因此，它与 Web Storybook 完全兼容，包括

• 📚 Storybook 文档 (autodocs + MDX)
• 🧪 Storybook 测试运行器 和其他测试工具
• 🧩 大多数 Storybook 插件，包括 A11y、i18n 等
• 👁️ 可视化测试工具，如 Chromatic

也许最重要的是，它为您提供了一个漂亮的、可通过 Web 浏览的故事集合，可以从 Web 轻松访问。

当然，Web 模拟只是一种近似，某些 RN 组件/功能/交互只能在设备上以原生方式使用。

但是 RN Storybook 和 RNW Storybook 可以共存于一个项目中，因此您可以两全其美！请参阅文档，了解如何在您的项目中设置 Storybook RNW。

立即试用

如果您正在启动一个新的 RN 项目，请查看 React Native 版 Storybook 教程，该教程已更新至 v8！

如果您要升级现有的 RN 项目，请首先将所有 storybook 依赖项更新到 8.3.1 或更高版本。

// package.json
{
  "devDependencies": {
    "@storybook/react-native": "^8.3.1",
    "@storybook/react": "^8.3.1",
    "@storybook/addon-ondevice-controls": "^8.3.1",
    "@storybook/addon-ondevice-actions": "^8.3.1",
    "@storybook/addon-ondevice-backgrounds": "^8.3.1",
    "@storybook/addon-ondevice-notes": "^8.3.1"
  }
}

然后将几个新的依赖项添加到您的项目中，这是更新后的 UI 所需的。如果您使用 Expo，expo install 是获取与您的设置兼容的版本的最安全方法

npx expo install react-native-reanimated react-native-gesture-handler @gorhom/bottom-sheet react-native-svg

如果您使用 RN CLI，则需要确保您使用的版本与您的 React Native 版本兼容

npm install react-native-reanimated react-native-gesture-handler @gorhom/bottom-sheet react-native-svg

接下来，通过运行 yarn storybook-generate 重新生成您的 .storybook/storybook.requires.ts 文件。您应该在文件中看到一个新的 updateView 函数。

最后，应用新的 Metro 配置包装器以应用 Storybook 设置。

// metro.config.js
const withStorybook = require('@storybook/react-native/metro/withStorybook');

const config = /* existing configuration */;
module.exports = withStorybook(config);

我们记录了此版本和之前版本的升级过程，请参阅 RN Storybook 的 MIGRATION.md。

下一步是什么？

我们很高兴终于与 Web 版 Storybook 同步更新。在 8.3 版本发布后，我们计划进行各种改进

• 在原生内联中引入与 Web 相同的控件
• 测试集成和实用程序
• 🤔… 请告诉我们您的建议！

最重要的是，我们计划保持 React Native 版 Storybook 与 Web 版 Storybook 同步。

感谢您的阅读，如果您有反馈，请告知我们，以便我们继续改进。要联系我们，请访问 Discord 或在 GitHub 上创建讨论。要了解 React Native Storybook 的最新动态，您可以关注 Danny_H_W 的 Twitter。