React Native Storybook Loader安装与使用指南

React Native Storybook Loader安装与使用指南

react-native-storybook-loaderAn automatic story loader for react-native-storybooks项目地址:https://gitcode.com/gh_mirrors/re/react-native-storybook-loader

---

1. 项目目录结构及介绍

React Native Storybook Loader是一个CLI工具，旨在自动化React Native项目中故事书（Storybook）的故事导入过程。虽然项目具体结构可能会因用户的定制而有所不同，但基于其源码和配置要求，我们可以概述一个基本的项目结构：

• 根目录:
  • node_modules: 安装的所有npm依赖包。
  • package.json: 包含项目元数据，包括依赖项、脚本命令等。
  • src: 开发的主要源代码目录，存放组件和功能相关代码。
  • storybook: 故事书相关配置和运行时代码的目录。
    • index.js: 故事书的入口文件，负责加载故事并启动界面。
    • storyLoader.js: 自动生成的文件，由rnstl（React Native Storybook Loader）创建，用于动态导入所有故事文件。
    • 可能还有.config.js或其它配置文件，根据用户自定义设置。
  • .gitignore, .editorconfig, gitattributes, 等: 版本控制和编辑器配置文件。
  • babel.config.js: Babel转译配置。
  • jest.config.js, travis.yml, appveyor.yml: 测试、持续集成配置文件。

2. 项目启动文件介绍

• 主要启动文件:

  • package.json中的scripts: 关键在于prestorybook和start或storybook命令。prestorybook通常配置为执行rnstl以生成storyLoader.js，确保在启动故事书前有最新导入的故事。启动故事书时，你将运行类似yarn storybook的命令，该命令依据@storybook/react-native和自动生成的/storybook/storyLoader.js来运行你的故事。

• storybook/index.js:

  • 此文件是故事书的配置和启动点。它导入了getStorybookUI和configure来自Storybook库，以及通过loadStories从自动生成的storyLoader.js文件导入所有故事。最后，它配置并初始化故事书UI，并可选地注册应用到React Native环境。

3. 项目配置文件介绍

• package.json配置:

  • 在package.json中，你会找到与React Native Storybook Loader相关的配置主要体现在脚本(scripts)部分，尤其是添加"prestorybook": "rnstl"，指示在启动Storybook之前要运行的预处理步骤。
  • 进一步的，通过在package.json的其他字段如react-native-storybook-loader部分（如果存在），你可以自定义搜索目录(searchDir)、输出文件路径(outputFile)以及匹配文件的模式(pattern)等参数，从而精确控制故事文件的导入行为。

• 特定于rnstl的配置:

  • 实际上，特定于rnstl的配置应直接写入package.json，但不是作为独立文件。上述提到的选项，如searchDir、outputFile和pattern，可以在scripts命令之外，按需加入到package.json的配置部分，以便控制rnstl的行为。

通过以上介绍，开发者可以理解如何组织和配置React Native项目来利用React Native Storybook Loader，实现故事书故事的自动化管理和加载。

react-native-storybook-loaderAn automatic story loader for react-native-storybooks项目地址:https://gitcode.com/gh_mirrors/re/react-native-storybook-loader