Storybook for React Native 使用教程

1. 项目的目录结构及介绍

storybookjs/react-native/
├── .github/
├── addons/
├── app/
├── docs/
├── lib/
├── scripts/
├── storybook/
├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── .yarnrc
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── package.json
└── yarn.lock

• .github/: 包含 GitHub 相关的配置文件，如 issue 模板、PR 模板等。
• addons/: 包含 Storybook 的附加组件。
• app/: 包含示例应用的代码。
• docs/: 包含项目的文档。
• lib/: 包含库的核心代码。
• scripts/: 包含项目的脚本文件。
• storybook/: 包含 Storybook 的配置和故事文件。
• .babelrc: Babel 配置文件。
• .editorconfig: 编辑器配置文件。
• .eslintrc.js: ESLint 配置文件。
• .gitignore: Git 忽略文件配置。
• .prettierrc: Prettier 配置文件。
• .yarnrc: Yarn 配置文件。
• CHANGELOG.md: 变更日志。
• CODE_OF_CONDUCT.md: 行为准则。
• CONTRIBUTING.md: 贡献指南。
• LICENSE: 许可证。
• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置。
• yarn.lock: Yarn 锁定文件。

2. 项目的启动文件介绍

项目的启动文件主要位于 storybook/ 目录下，其中 storybook/index.js 是 Storybook 的入口文件。

// storybook/index.js
import { getStorybookUI } from '@storybook/react-native';

import './storybook/addons';
import './storybook/config';

const StorybookUIRoot = getStorybookUI({});

export default StorybookUIRoot;

这个文件负责初始化 Storybook UI，并加载附加组件和配置。

3. 项目的配置文件介绍

.babelrc

Babel 配置文件，用于配置 JavaScript 的转译规则。

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": []
}

.eslintrc.js

ESLint 配置文件，用于配置代码检查规则。

module.exports = {
  root: true,
  extends: '@react-native-community',
  rules: {
    // 自定义规则
  }
};

.prettierrc

Prettier 配置文件，用于配置代码格式化规则。

{
  "singleQuote": true,
  "trailingComma": "all"
}

package.json

项目依赖和脚本配置文件。

{
  "name": "storybook-react-native",
  "version": "1.0.0",
  "scripts": {
    "storybook": "start-storybook -p 7007"
  },
  "dependencies": {
    "@storybook/react-native": "^6.0.0"
  },
  "devDependencies": {
    "babel-loader": "^8.0.0"
  }
}

这个文件包含了项目的名称、版本、脚本命令以及依赖包。

通过以上介绍，您可以更好地理解和使用 Storybook for React Native 项目。希望这篇教程对您有所帮助！