前言
React Native 是一个流行的跨平台移动开发框架，它允许开发人员使用 JavaScript 构建原生移动应用程序。在用 React Native 开发项目时，我们会发现需要在多个平台上测试和验证我们的组件。这时候，Storybook 就可以帮助我们解决这个问题。
Storybook 是一个开源的工具，它为我们的组件提供了一个交互式的展示界面。我们可以把组件当作独立的单元测试来运行和修改。 其中，@nlabs/storybook-react-native 是一个专门为 React Native 开发者打造的 Storybook 扩展。
本篇文章就是要通过 @nlabs/storybook-react-native，介绍在 React Native 开发中，如何搭建 Storybook 并使用它帮助我们开发、测试我们的组件。
准备工作
在开始使用 Storybook 之前，我们需要在 React Native 项目中添加 Storybook 功能。以下是添加 Storybook 的准备工作：
- 在 React Native 项目中安装 Storybook 依赖包：
npm i -D @storybook/react-native
- 初始化 Storybook 项目：
npx -p @storybook/cli sb init --type react_native
- 启动 Storybook：
npm run storybook
在启动 Storybook 之后，可以在浏览器中打开 http://localhost:7007/，看到 Storybook 的主页。
安装 @nlabs/storybook-react-native
有了 Storybook，再安装 @nlabs/storybook-react-native 就是附加的步骤。以下是安装步骤：
- 安装依赖包：
npm i -D @nlabs/storybook-react-native
- 添加 Storybook 配置，修改
.storybook/main.js：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
-----
-------- ----------------------------------
------- -
-- ---
--------------------------------
--
------- -------------------- --------------
--案例演示
下面我们来尝试编写一个简单的组件，将其添加到 Storybook 中，并使用 @nlabs/storybook-react-native 进行调试。
创建一个自定义 Button 组件
我们先创建一个名为 Button.js 的文件，这个组件演示了自定义的 Button。
-- -------------------- ---- -------
------ ----- ---- -------
------ -
-----
-----------------
- ---- --------------
----- ------ - -- -------- ----- -- -- -
----------------- ------------------
--------------------
-------------------
-
------ ------- ------创建 Button 的故事
现在我们要把我们创建的 Button 组件，放到 Storybook 中创建一个 Button 的故事。新建 Button.stories.js 文件。
-- -------------------- ---- -------
------ ----- ---- -------
------ ------ ---- ----------
------ ------- -
------ -----------------
---------- -------
-
------ ----- ------- - -- -- -
------- -------------- ------- ----------- -- -------------- ------ ---------- --
-
------ ----- --------- - -- -- -
------- ---------------- ------- ----------- -- ---------------- ------ ---------- --
-
在 Storybook 中展示 Button 组件
在 Storybook 中展示 Button，需要在 .storybook/main.js 文件中添加 Button 的配置。
-- -------------------- ---- -------
-------------- - -
-------- ----------------------------------
------- -
--------------------------------
---------------------------
-------------------------
-------------------------
--
--调试 Button 组件
现在我们可以启动 Storybook，尝试在 iOS 或者 Android（需要在本机上预先装有 Android Studio）模拟器上运行 Storybook。
- 启动 Storybook：
npm run storybook
- 启动 Expo app：
npm run ios
或者
npm run android
完成上面的操作之后，就可以在 Storybook 中查看我们创建的 Button 组件，并且可以通过 Expo App 调试我们的组件了。
结语
本文介绍了如何使用 npm 包 @nlabs/storybook-react-native 来搭建 Storybook 和调试 React Native 组件，所以对于 React Native 开发者来说，该工具不仅让他们更加透彻地了解并调试他们的组件，同时也允许他们更快、更高效地开发和测试它们。
在实际项目中，可以通过使用 Storybook 和 @nlabs/storybook-react-native 来简化和加速开发流程，进而使得开发者可以把更多的时间和精力投入到创意和创新之中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cd981e8991b448e6800