Storybook for React Native 使用教程
react-native📓 Storybook for React Native!项目地址:https://gitcode.com/gh_mirrors/rea/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 项目。希望这篇教程对您有所帮助!
react-native📓 Storybook for React Native!项目地址:https://gitcode.com/gh_mirrors/rea/react-native