
React Native Storybook 8
React Native 回归了!

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。
推出 Storybook for React Native 8.3!
— Storybook (@storybookjs) 2024 年 10 月 8 日
🤝 与 Web 版本统一的发布计划
📱 全新的移动端 UI
↔️ 新的宽屏布局
⚙️ 简化的 Metro 配置
🔁 改进的热重载
🏆 稳定的 React Native Web 支持 pic.twitter.com/ZKFU5Hhpe8