返回博客

React Native Storybook 8

React Native 回归了!

loading
Michael Shilman
@mshilman
上次更新

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 支持
Screenshot of Storybook running in an iOS simulator

与 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 的桌面布局相匹配。

Screenshot of Storybook running on a desktop

简化的 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.jsstories 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 完全兼容,包括

也许最重要的是,它为您提供了一个可以通过 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

加入 Storybook 邮件列表

获取最新新闻、更新和发布

7,180名开发者及仍在增长

我们在招聘!

加入 Storybook 和 Chromatic 背后的团队。构建被数十万开发者在生产环境中使用的工具。优先考虑远程工作。

查看职位

热门文章

Storybook 测试抢先看

在浏览器中进行多模式测试,即时反馈
loading
Michael Shilman

Storybook 8.4

在浏览器中一键进行组件测试
loading
Michael Shilman

Storybook 8.3

闪电般的组件测试速度
loading
Michael Shilman
加入社区
7,180名开发者及仍在增长
缘由为何选择 Storybook组件驱动 UI
文档指南教程更新日志遥测数据
社区插件参与其中博客
精选案例探索项目组件词汇表
开源软件
Storybook - Storybook 中文

由以下团队维护
Chromatic - Storybook 中文
特别感谢 Netlify CircleCI