在 React Native 开发中，Storybook 是一个非常好的组件测试工具。然而，在使用 Storybook 的过程中，开发者需要不断地手动刷新应用程序并重新运行 Storybook，这无疑会降低开发人员的效率和精力。为了让开发者能够更好地使用 Storybook，npm 包 react-native-storybook-loader 应运而生。
react-native-storybook-loader 是什么？
react-native-storybook-loader 是一个可以自动刷新 React Native 应用程序并同步运行 Storybook 的 npm 包。 开发人员可以在该插件的帮助下同时编写和测试应用程序，而无需进行手动配置和重新加载操作。
这个包的主要功能是将 storybook 静态资源（storybooks, addons, 静态资源等）打包到应用程序的 bundle 中，从而使应用程序可以自动加载 story book。
如何安装 react-native-storybook-loader？
react-native-storybook-loader 可以直接在 npm 上安装：
--- ------- ----------------------------- ----------
在安装完成之后，在应用程序的根目录里我们需要创建一个名为 .storybook/loader.js 的文件，并添加以下代码：
------ - --------------- --------- - ---- -------------------------- ------ - ----------- - ---- ---------------- ------------ -- - -------------- -- -------- ------ ------- ---------------- ----- ----- ----- ----------- ---
另外，你还需要在应用程序的 webpack.config.js 文件中添加以下配置项：
----- ---- - ----------------
-------------- - -
-------- -
------ -
-------------------------- -------------------
--
--
---------- -
------------ -------------------- ----------
---- -----
------- -----
----- -----
--
--如何在应用程序中使用 react-native-storybook-loader？
为了确保 react-native-storybook-loader 正确地运行，我们需要按照以下步骤添加用于打包 storybook 的命令：
---------- - --- ------------ ----------------- ------------------ ----------------- --- --
现在，我们可以在应用程序的根目录下运行以下命令来启动我们的 Storybook：
--- --- ---------
此命令将在本地服务器上启动 Storybook。
当我们需要在 React Native 应用程序中使用 Storybook 时，我们需要通过 react-native-storybook-loader 包装我们的应用程序。 可以通过以下代码将其添加到 React Native 应用程序的入口点：
------ ----------- ---- ---------------------- ----------- - -------------- - ------------ -
react-native-storybook-loader 实现方式
react-native-storybook-loader 的主要实现方式基于 webpack-dev-server 和 metro-bundler。 metro-bundler 是 React Native 应用程序默认的打包工具，而 webpack-dev-server 是用于开发 React Native 应用程序的本地服务器。 react-native-storybook-loader 首先将 Storybook 的所有相关文件打包到 app/bundle/storybook.bundle.js 中。 接着，在 app/index.ios.js 和 app/index.android.js 入口文件中，我们通过判断当应用程序运行时处于开发模式（__DEV__）时，将导出我们的 StorybookUI 应用程序，以实现自动加载 Storybook。
总结
react-native-storybook-loader 是一个非常实用的工具，它为 React Native 开发者提供了一个极佳的组件测试和开发体验。 在使用该方法时，请确保仔细遵循安装和使用步骤，以确保您的应用程序能够正确地加载 StorybookUI，并且能够正常运行。 希望这篇文章能够帮助你了解 react-native-storybook-loader，更好地使用 Storybook。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/react-native-storybook-loader