react-native - 如何将我的 React Native Storybook 构建到 Web？

Question

我在运行 React Native Storybook它在 native 模拟器中运行 Storybook。

除了目前 React Native Storybook 的工作方式之外，我还想为 Web 构建一个它的实例，作为我们应用程序的引用伴侣。

我正在使用 "@storybook/react-native": "5.3.14" .我的故事位于 ./storybook .

Answer 1

安装 react-native-web , @storybook/react和 babel-plugin-react-native-web来自项目根目录中的 npm。

为 Storybook 添加一个新的配置目录，比如 ./.storybook-website .在此目录中，添加 main.js .否则，此创建将由 Storybook 安装向导完成。

my-app
├── .storybook-website
│   └── main.js
└── // .... rest of your app

在 main.js 中添加以下内容:

module.exports = {
  stories: ['../storybook/stories/index.js'],
  webpackFinal: async (config) => {
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      // Transform all direct `react-native` imports to `react-native-web`
      'react-native$': 'react-native-web',
      // make sure we're rendering output using **web** Storybook not react-native
      '@storybook/react-native': '@storybook/react',
      // plugin-level react-native-web extensions
      'react-native-svg': 'react-native-svg/lib/commonjs/ReactNativeSVG.web',
      // ... 
    };
    // mutate babel-loader
    config.module.rules[0].use[0].options.plugins.push(['react-native-web', { commonjs: true }]);
    // console.dir(config, { depth: null });
    return config;
  },
};

更新 stories main.js 中的路径到现有根故事的位置。

最后将运行脚本添加到 package.json:

"storybook:web": "start-storybook -p 6006 --config-dir ./.storybook-website",
"storybook-build:web": "build-storybook --config-dir ./.storybook-website --output-dir dist-storybook-website --quiet"

快!使用 yarn storybook:web 运行.这将运行 storybook 开发服务器，打开一个浏览器，显示您通常会在设备模拟器中看到的内容。