如何将我的 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

\n\n

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

\n\n

my-app\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 .storybook-website\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 main.js\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 // .... rest of your app\n

\n\n

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

\n\n

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

\n\n

更新stories为现有根故事的位置。

\n\n

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

\n\n

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

\n\n

急！运行使用yarn storybook:web。这将运行故事书开发服务器，打开浏览器显示您通常会在设备模拟器中看到的内容。

\n