react-native-storysource-transformer

为 react-native 启用 storybook storysource 附加组件。

目的

此包使 storysource 附加组件与 react-native 兼容，而 react-native 在 默认情况下 不支持它。

安装和配置

步骤 1：安装 react-native-storysource-transformer 库

yarn add react-native-storysource-transformer --dev

步骤 2：配置 react native 包管理器

对于 React Native v0.58 或更高版本

将您的 metro.config.js 文件与以下配置合并

metro.config.js:

module.exports = {
  transformer: {
    babelTransformerPath: require.resolve(
      "react-native-storysource-transformer"
    ),
  },
};

如果您已经使用另一个转换器，您可以像这样引用一个中间文件
metro.customTransformer.js :

const svgTransformer = require("react-native-svg-transformer");
const storyTransformer = require("react-native-storysource-transformer");

module.exports.transform = function (options) {
  if (options.filename.endsWith(".svg")) {
    return svgTransformer.transform(options);
  } else {
    return storyTransformer.transform(options);
  }
};

步骤 3：安装 storysource 附加组件

安装 storysource 附加组件和 source-loader 依赖项

yarn add @storybook/addon-storysource --dev
yarn add @storybook/source-loader --dev

在您的 storybook/addons.js 文件中添加此行

import "@storybook/addon-storysource/register";

步骤 4（可选）：自定义配置

react-native-storysource-transformer 由项目 package.json 中的 react-native-storysource-transformer 部分控制。

选项

设置	类型	描述	默认值
filePatterns	string[]	一个匹配您的故事文件的 blob 数组。	["**/*.stories.{js,ts}{x,}", "**/stories/index.{js,ts}{x,}"] 将匹配所有名为 *.stories.js/jsx/ts/tsx 的文件以及默认的 index 故事文件
storyMatcher（高级）	string	用于解析故事的正则表达式。如果您的故事没有使用通常的约定编写，则可能需要它：storiesOf('Welcome', module).add(...	"(storiesOf.*?\\(.*?module\\))"

示例

以下示例将处理所有以 .stories.js 或 .stories.jsx 结尾的故事。

package.json

{
  "name": "AwesomeProject",
  "config": {
    "react-native-storysource-transformer": {
      "filePatterns": ["**/*.stories.js", "**/*.stories.jsx"]
    }
  }
}

如果您更改了这些选项中的任何一个，您可能需要运行 yarn react-native start --reset-cache。

开始

照常运行您的 storybook 服务器和 storybook 应用程序

yarn storybook

react-native run-ios