react-native-storysource-transformer

为 react-native 启用 storybook storysource 插件。

目的

此软件包使 storysource 插件与 react-native 兼容，storysource 插件默认不支持 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[]	一个用于匹配你的 story 文件的模式数组。	["**/*.stories.{js,ts}{x,}", "**/stories/index.{js,ts}{x,}"] 将匹配所有名为 *.stories.js/jsx/ts/tsx 的文件以及默认的 index story 文件
storyMatcher （高级）	string	用于解析 story 的正则表达式。如果你的 story 不是使用常用约定编写的，例如：storiesOf('Welcome', module).add(...，则可能需要此设置。	"(storiesOf.*?\\(.*?module\\))"

示例

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

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