React Native Web 的 Storybook

React Native Web 的 Storybook 是一个框架，可以轻松地为React Native应用程序单独开发和测试 UI 组件。它使用Vite为浏览器构建您的组件。该框架包含

• ⚛️ React Native 组件
• 🧑‍💻 可在 Web 上共享
• 🪄 无需配置
• 💫 等等！

要求

• 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 的项目中

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

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

npx storybook@latest upgrade

安装框架及其对等依赖项

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

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

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 实例的 URL 中添加 ?path=/onboarding 查询参数来再次运行它，前提是示例 story 仍然可用。

React Native 与 React Native Web 对比

如果您正在构建 React Native (RN) 组件，Storybook 有两种选择：Native 和 Web。

这两种选项都提供了一个故事目录，当您在喜欢的编辑器中编辑代码时，该目录会热刷新。但是，它们的实现方式却大相径庭

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

对比

那么，哪种选择适合您？

Native。 如果您想要以下内容，应选择此选项

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

Web。 如果您想要以下内容，应选择此选项

• 共享 - 发布到 Web 并与您的团队共享或公开共享。
• 文档 - 自动生成的组件文档或 MDX 中的丰富 Markdown 文档。
• 测试 - 组件、视觉和可访问性测试。
• 插件 - 500 多个插件，可改进开发、文档、测试以及与其他工具的集成。

两者兼有。 也可以同时使用这两种选项。这会增加 Storybook 的安装占地空间，但如果您想要原生保真度以及所有 Web 功能，这是一个不错的选择。下面了解更多。

同时使用 React Native 和 React Native Web

同时使用 React Native 和 React Native Web 的最简单方法是在安装 Storybook 时选择“Both”选项。这将为两个环境安装并创建配置，使您可以在同一个项目中运行这两个环境的 Storybook。

但是，如果您已安装其中一个版本，也可以单独安装它们。通过运行安装命令并选择设置向导中的“React Native Web”，可以在现有的 React Native Storybook 中添加 React Native Web Storybook，反之亦然。

API

选项

如果需要，您可以传递一个选项对象进行其他配置

import type { StorybookConfig } from '@storybook/react-native-web-vite';
 
const config: StorybookConfig = {
  framework: {
    name: '@storybook/react-native-web-vite',
    options: {
      modulesToTranspile: ['my-library'], // add libraries that are not transpiled for web by default
 
      // 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
      }
    },
  },
};
 
export default config;

Reanimated 的示例配置

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 的示例配置

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

转译其他 node_modules 的示例配置

假设您需要转译一个名为 my-library 的库，该库默认不会为 Web 进行转译。您可以将其添加到 modulesToTranspile 选项。

const main: StorybookConfig = {
  // ... rest of config
 
  framework: {
    name: "@storybook/react-native-web-vite",
    options: {
      modulesToTranspile: ['my-library'],
    },
  },
}

builder

类型：Record<string, any>

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