React Native Storybook 8

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

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

它包含

• 🤝 与 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 的主“Canvas”区域干净地共存

自从 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);

该包装器还接受一个 options 对象来自定义行为。例如，如果您想在 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 可以热重载现有 Stories，并支持从现有 Story 文件中添加/删除 Stories。然而，添加和删除 Story 文件需要重启。

现在，得益于 Metro 的改进，您现在可以添加和删除与 .storybook/main.js 中 stories globs 匹配的 Story 文件，并且 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 Docs (autodocs + MDX)
• 🧪 Storybook 测试运行器及其他测试工具
• 🧩 大多数 Storybook 插件，包括 A11y、i18n 等等
• 👁️ 视觉测试工具，例如 Chromatic

也许最重要的是，它为您提供了一个可以通过 Web 浏览的 Story 集合，并且可以方便地从 Web 访问。

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

但是 RN Storybook 和 RNW Storybook 可以在一个项目中并存，因此您可以兼得两者之长！请参阅有关如何在项目中设置 Storybook RNW 的文档。

今天就试试

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

如果您正在升级现有的 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 config 包装器来应用 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 与 Storybook 的 Web 端保持同步。

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