Storybook 的 React Native Web 插件

此插件配置了 @storybook/react 以使用 React Native for Web (RNW) 显示 React Native (RN) 项目。

• Storybook 的 React Native Web 插件
  • 入门
  • 常见问题
  • 配置选项
    • 未转译的 React Native 库
    • React Native Web 库别名
    • 添加 Babel 插件
  • 配置流行库
  • 已知限制

有关常见问题，请参阅 常见问题解答。

您可以在 这篇博客文章 中阅读有关此包的更多信息。

要贡献，请参阅贡献指南 此处

以下是一张您如何在 storybook/react-native 旁边使用此插件的屏幕截图，该图像取自以下 启动代码

入门

假设您有一个现有的 RN 项目，请从项目根目录运行以下命令：

npx sb init --type react
yarn add react-dom react-native-web babel-plugin-react-native-web @storybook/addon-react-native-web --dev

然后编辑您的 .storybook/main.js 文件

module.exports = {
  addons: [/*existing addons,*/ '@storybook/addon-react-native-web'],
};

从这里，您应该能够根据 React 的 Storybook 指令编写包含 RN 组件的故事。

常见问题

有关常见问题（如“找不到加载程序”错误），请参阅 常见问题解答。

配置选项

大多数软件包应该无需额外更改即可正常工作，但在某些情况下需要额外的步骤。一个常见的例子是“reanimated”，它需要一些 Babel 配置和额外的转译。

选项	类型	描述
modulesToTranspile	Array<string>	需要转译的 node_modules
modulesToAlias	{[key: string]: string}	需要别名的 node_modules
babelPlugins	Array<string>	您想要应用的 Babel 插件
projectRoot	string	项目根目录的路径，如果您在单一仓库中，则可能需要设置此选项。

未转译的 React Native 库

许多 React Native 软件包是未经转译发布的，这在 Web 平台上无法正常工作。如果您在添加软件包后遇到“找不到正确的加载程序”之类的错误，请尝试将其添加到此插件的 modulesToTranspile 选项中。

您可以像这样操作：

module.exports = {
  addons: [
    /*existing addons,*/
    {
      name: '@storybook/addon-react-native-web',
      options: {
        modulesToTranspile: ['react-native-package-name'],
      },
    },
  ],
};

React Native Web 库别名

某些 React Native 软件包建议使用模块别名作为导入和使用现有软件包的 Web 变体的工具。如果您需要向 webpack 的 config.resolve.alias 添加额外的键值对，请使用此插件的 modulesToAlias 选项。您无需将 react-native-web 添加到此列表中，因为它默认已包含在内。

您可以像这样操作：

module.exports = {
  addons: [
    /*existing addons,*/
    {
      name: '@storybook/addon-react-native-web',
      options: {
        modulesToAlias: {
          'react-native-package-name': 'react-native-web-package-name',
        },
      },
    },
  ],
};

将 react-native-package-name 替换为实际软件包的名称。

添加 Babel 插件

通常需要为 React Native 生态系统中的某些软件包提供 Babel 插件，您可以将这些插件列表传递给插件。

module.exports = {
  addons: [
    /*existing addons,*/
    {
      name: '@storybook/addon-react-native-web',
      options: {
        babelPlugins: ['babel-plugin-name'],
      },
    },
  ],
};

配置流行库

许多库无需额外配置即可正常工作，以下是一些需要配置的库示例。

注意：react-native-vector-icons 由于需要字体，因此需要一些额外的步骤，以后会发布一个包含该配置的插件。

module.exports = {
  addons: [
    /*existing addons,*/
    {
      name: '@storybook/addon-react-native-web',
      options: {
        modulesToTranspile: ['react-native-reanimated'],
        babelPlugins: ['react-native-reanimated/plugin'],
      },
    },
  ],
};

module.exports = {
  addons: [
    /*existing addons,*/
    {
      name: '@storybook/addon-react-native-web',
      options: {
        modulesToTranspile: ['react-native-vector-icons'],
      },
    },
  ],
};

module.exports = {
  addons: [
    /*existing addons,*/
    {
      name: '@storybook/addon-react-native-web',
      options: {
        modulesToTranspile: ['react-native-vector-icons'],
      },
    },
  ],
};

已知限制

• 不支持 React Native Web 的库将无法工作。
• 组件将在 Web 上显示，因此可能与移动设备上的组件不同，因为可能使用这些组件的 DOM 版本（如 <div> 和 span）。
  • 当使用 View/Text 或其他跨平台组件等基本组件时，差异应该很小。