Fluent UI React Native 项目教程

Fluent UI React Native 项目教程

fluentui-react-native A react-native component library that implements the Fluent Design System. 项目地址: https://gitcode.com/gh_mirrors/fl/fluentui-react-native

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

fluentui-react-native/
├── apps/
│   ├── FluentTester/
│   ├── RNTester/
│   └── ...
├── packages/
│   ├── @fluentui-react-native/button/
│   ├── @fluentui-react-native/experimental-text/
│   └── ...
├── scripts/
│   ├── build.js
│   ├── clean.js
│   └── ...
├── .gitignore
├── .prettierrc
├── package.json
└── README.md

• apps/: 包含示例应用程序，如 FluentTester 和 RNTester，用于测试和展示 Fluent UI 组件。
• packages/: 包含 Fluent UI React Native 的核心组件库，每个组件都有独立的目录。
• scripts/: 包含项目的构建和清理脚本。
• .gitignore: 指定 Git 忽略的文件和目录。
• .prettierrc: 配置代码格式化工具 Prettier。
• package.json: 项目的依赖和脚本配置文件。
• README.md: 项目的介绍和使用说明。

2. 项目的启动文件介绍

项目的启动文件通常位于 apps/ 目录下的某个示例应用程序中。以 FluentTester 为例，启动文件为 apps/FluentTester/index.js。

import { AppRegistry } from 'react-native';
import App from './src/FluentTester/App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

• AppRegistry.registerComponent: 注册应用程序的根组件。
• App: 应用程序的根组件，通常位于 src/FluentTester/App.js。

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。

{
  "name": "fluentui-react-native",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "build": "node scripts/build.js",
    "clean": "node scripts/clean.js",
    "start": "node scripts/start.js"
  },
  "dependencies": {
    "react": "16.13.1",
    "react-native": "0.63.4",
    "@fluentui-react-native/button": "^0.1.0"
  },
  "devDependencies": {
    "eslint": "^7.12.1",
    "prettier": "^2.1.2"
  }
}

• scripts: 定义了项目的构建、清理和启动脚本。
• dependencies: 列出了项目运行所需的依赖包。
• devDependencies: 列出了开发环境所需的依赖包。

.prettierrc

.prettierrc 文件配置了代码格式化工具 Prettier。

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

• singleQuote: 使用单引号。
• trailingComma: 在多行对象和数组中添加尾随逗号。
• printWidth: 每行代码的最大宽度为 80 个字符。

通过以上介绍，您可以更好地理解和使用 Fluent UI React Native 项目。

fluentui-react-native A react-native component library that implements the Fluent Design System. 项目地址: https://gitcode.com/gh_mirrors/fl/fluentui-react-native