Storybook for React Native Web

Storybook for React Native Web 是一个框架，可轻松为 React Native 应用开发和隔离测试 UI 组件。它使用 Vite 构建组件以供网络浏览器使用。该框架包括

⚛️ React Native 组件
🧑‍💻 可在网络上分享
🪄 零配置
💫 还有更多！

除了 React Native Web，Storybook 还支持设备上的 React Native 开发。如果你不确定哪种适合你，请阅读我们的比较。

要求

React-Native ≥ 0.72
React-Native-Web ≥ 0.19
Vite ≥ 5.0

入门

在没有 Storybook 的项目中

在你的 React Native 项目的根目录中运行此命令后，按照提示进行操作

npm create storybook@latest

更多关于 Storybook 入门的信息。

在带有 Storybook `addon-react-native-web` 的项目中

React Native Web 插件是 React Native Web Vite 框架（即 @storybook/react-native-web-vite）基于 Webpack 的前身。如果你正在使用该插件，你应该迁移到该框架，它更快、更稳定、受到维护且文档更完善。请按照以下步骤进行操作。

运行以下命令将 Storybook 升级到最新版本

npx storybook@next upgrade

此框架旨在与 Storybook 8.5 及以上版本配合使用，以获得最佳体验。如果你使用的是旧版本的 Storybook，我们将无法提供支持。

安装该框架及其对等依赖项

此片段对于 React 不存在。

npm install --save-dev @storybook/react-native-web-vite vite

更新你的 .storybook/main.js|ts 文件以更改 framework 属性并移除 @storybook/addon-react-native-web 插件

.storybook/main.js

此片段对于 React 不存在。

export default {
  addons: [
    '@storybook/addon-react-native-web', // 👈 Remove the addon
  ],
  // Replace @storybook/react-webpack5 with the Vite framework
  framework: '@storybook/react-native-web-vite',
};

最后，从你的项目中移除该插件和类似的包（例如 @storybook/react-webpack5 和 @storybook/addon-react-native-web）。

在带有 Storybook `react-native` 的项目中

Storybook for React Native 是一个在模拟器或你的移动设备上运行的框架。可以同时运行 React Native Web 和 React Native，但我们仍在努力实现无缝集成。在此期间，我们建议二选一运行。如果你需要帮助弄清楚哪种适合你，请阅读我们的比较。

运行安装向导

如果一切顺利，你应该会看到一个安装向导，它将帮助你开始使用 Storybook。该向导将向你介绍主要概念和功能，包括如何组织 UI、如何编写你的第一个 Story，以及如何利用控件测试你的组件对各种输入的响应。

Storybook onboarding

如果你跳过了向导，只要示例 Stories 仍然可用，你随时可以通过在 Storybook 实例的 URL 中添加 ?path=/onboarding 查询参数来再次运行它。

React Native vs React Native Web

如果你正在构建 React Native (RN) 组件，Storybook 有两个选项：Native 和 Web。

这两个选项都提供了你的 Stories 目录，当你最喜欢的编辑器中编辑代码时，它会热更新。然而，它们的实现方式却截然不同

Native - 在你的 React Native 应用程序内部运行。它具有高度保真度，但功能集有限。
Web - 在浏览器中显示你的 React Native 组件。它基于 Storybook for Web，功能丰富且成熟。

那么，哪种选项适合你呢？

Native。如果你想要以下功能，你应该选择此选项

Native 功能 - 你的组件依赖于设备特定功能，例如原生模块。它在你实际的应用程序中、模拟器中或设备上运行，并提供完全保真度。Web 版本使用 react-native-web，它适用于大多数组件，但存在限制。
移动发布 - 你想将你的 Storybook 作为测试构建的一部分或嵌入到你的应用程序中在设备上分享。

Web。如果你想要以下功能，你应该选择此选项

分享 - 发布到网络并与你的团队或公开分享。
文档 - 自动生成的组件文档或使用 MDX 编写的丰富的 markdown 文档。
测试 - 对你的组件进行组件测试、视觉测试和可访问性测试 (a11y)。
插件 - 500 多个插件，可改进开发、文档、测试以及与其他工具的集成。

两者结合。也可以同时使用这两个选项。但是，这会增加 Storybook 的安装空间，并且需要更多的配置工作。因此，我们建议先选择一个选项开始，并在成功运行后再进行扩展。

API

选项

如果需要，你可以传递一个 options 对象进行额外配置

.storybook/main.ts

import type { StorybookConfig } from '@storybook/react-native-web-vite';
 
const config: StorybookConfig = {
  framework: {
    name: '@storybook/react-native-web-vite',
    options: {
      // You should apply babel plugins and presets here for your project that you want to apply to your code
      // for example put the reanimated preset here if you are using reanimated
      // or the nativewind jsxImportSource for example
      pluginReactOptions: {
        jsxRuntime: 'automatic' | 'classic', // default: 'automatic'
        jsxImportSource: string, // default: 'react'
        babel:{
          plugins: Array<string | [string, any]>,
          presets: Array<string | [string, any]>,
          // ... other compatible babel options
        }
        include: Array<string|RegExp>,
        exclude: Array<string|RegExp>,
        // ... other compatible @vitejs/plugin-react options
      }
 
      // these options are used to configure transpilation of node_modules via babel
      // in most cases, you don't need to configure these options, but they are available if you need them
      pluginBabelOptions: {
        include: Array<string|RegExp>, // default: [/node_modules\/(react-native|@react-native)/]
        exclude: Array<string|RegExp>, // default: undefined
        presets: Array<string|[string, any]>,
        plugins: Array<string|[string, any]>,
        presetReact?: {
          runtime?: 'automatic' | 'classic'; // default: 'automatic'
          importSource?: string; // default: 'react'
        };
        // ... other compatible vite-plugin-babel options
      }
    },
  },
};
 
export default config;

reanimated 的配置示例

.storybook/main.ts

const main: StorybookConfig = {
  // ... rest of config
 
  framework: {
    name: "@storybook/react-native-web-vite",
    options: {
      pluginReactOptions: {
        babel: {
          plugins: [
            "@babel/plugin-proposal-export-namespace-from",
            "react-native-reanimated/plugin",
          ],
        },
      },
    },
  },
 
  // ... rest of config
}

nativewind 的配置示例

.storybook/main.ts

 
const main: StorybookConfig = {
  // ... rest of config
 
  framework: {
    name: "@storybook/react-native-web-vite",
    options: {
      pluginReactOptions: {
        jsxImportSource: "nativewind",
      },
    },
  },
}

`builder`

类型：Record<string, any>

配置框架的构建器的选项。对于此框架，可用选项可在Vite 构建器文档中找到。