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[]	用於比對您的 stories 檔案的 blob 陣列。	["**/*.stories.{js,ts}{x,}", "**/stories/index.{js,ts}{x,}"] 將會比對所有名稱為 *.stories.js/jsx/ts/tsx 的檔案和預設的 index story 檔案
storyMatcher（進階）	string	用於解析 story 的正規表示式。如果您的 stories 不是使用一般慣例編寫（例如：storiesOf('Welcome', module).add(...），則可能需要此設定	"(storiesOf.*?\\(.*?module\\))"

範例

以下範例將處理所有結尾為 .stories.js 或 .stories.jsx 的 stories。

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