# @fluentui-react-native/design 中文文档 规范地址：https://npmcn.com/package/%40fluentui-react-native/design/ 版本：0\.6\.1 npm 元数据更新时间：2026-11-11T18:02:33.315Z 中文译文更新时间：2026-11-15T01:16:36.217Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40fluentui-react-native/design 原文对照：https://npmcn.com/package/%40fluentui-react-native/design/?lang=original 项目主页：https://github.com/microsoft/fluentui-react-native#readme 源码仓库：https://github.com/microsoft/fluentui-react-native ## 关键信息（来自 npm 元数据） - 包体积（解压后）：3.3 MB，910 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：7 个 - peer 依赖：react 18\.2\.0 \|\| 19\.0\.0 \|\| 19\.1\.4，@types/react ~18\.2\.0 \|\| ~19\.0\.0 \|\| ~19\.1\.4，react-native ^0\.73\.0 \|\| ^0\.74\.0 \|\| ^0\.78\.0 \|\| ^0\.81\.6，react-native-macos ^0\.73\.0 \|\| ^0\.74\.0 \|\| ^0\.78\.0 \|\| ^0\.81\.0，react-native-windows ^0\.73\.0 \|\| ^0\.74\.0 \|\| ^0\.78\.0 \|\| ^0\.81\.0，@office-iss/react-native-win32 ^0\.73\.0 \|\| ^0\.74\.0 \|\| ^0\.78\.0 \|\| ^0\.81\.0 - 首次发布：2026-07-10T18:18:34.884Z - 最新版本发布：2026-11-11T18:02:33.001Z - 近 30 天下载量：6641（2026-10-15 至 2026-11-13，npm 官方下载统计） - 已发布版本数：11（近 12 个月 11 个） ## 中文简介 Fluent UI React Industrial的核心设计系统概念,公用事业,以及类型. ## 安装 ```sh npm install @fluentui-react-native/design ``` 也可以使用：`pnpm add @fluentui-react-native/design`、`yarn add @fluentui-react-native/design`、`bun add @fluentui-react-native/design` ## README # `@fluentui-react-native/design` Fluent UI React Indust:主题来源和提供者,现成 流利和 Flex 主题,结构化的光线,暗色,高相接,以及高相接的外观, Flex 语义符号,主题 风格工厂, 和一个选入运行时间色彩库。 遗留主题和令牌包从这里再导出他们的API. ## 快开始 包装一个场景 `ThemedRoot` (或 `ThemeProvider`,并读取 Flex 符号与 `useThemeState`数字 : ```tsx import { Text } from 'react-native'; import { FlexThemeReference, ThemedRoot, useThemeState } from '@fluentui-react-native/design'; const theme = new FlexThemeReference({ appearance: { colorScheme: 'system' } }); const Title = () => { const { tokens } = useThemeState(); return Hello; }; export const App = () => ( </ThemedRoot> ); ``` 现有 `ThemeReference` 主题和主题 `useTheme` 消费者继续在同一供应商之下工作 [主题参考](https://npmcn.com/package/%40fluentui-react-native/design/references/theming.md) 解释写作模式和它们如何相互操作. 流利自有的光线 黑暗和高相干的主题船 `themes` 进入点,以及 `fluentTheme` 沿着 系统外观,包括高对比度: ```tsx import { ThemedRoot } from '@fluentui-react-native/design'; import { fluentTheme } from '@fluentui-react-native/design/themes'; export const App = () => ( <ThemedRoot theme={fluentTheme} style={{ flex: 1 }}> <Title /> </ThemedRoot> ); ``` 使用 `fluentLightTheme` 或者说 `fluentDarkTheme` 当你需要一个固定 `Theme` 对象,或 `fluentHcTheme` 总是使用 高对比度. X3 Flex 的默认输入点为 `flexCoolTheme` 财务报告和审定财务报表 `flexWarmTheme`,可独立捆绑 描述光和暗. `flexTheme` 包含和开关调色板 `appearance.colorTone`。 。 。 . 用一作为 `FlexThemeReference` 基础 : ```tsx import { FlexThemeReference } from '@fluentui-react-native/design'; import { flexWarmTheme } from '@fluentui-react-native/design/themes'; const theme = new FlexThemeReference({ base: flexWarmTheme, appearance: { colorScheme: 'system' } }); ``` 没有明确的主题或继承边界, `ThemedRoot` 和主题钩 `flexCoolTheme`。 。 。 . ## 文档 | 专题 | 封面 | | --- | --- | | [他们](https://npmcn.com/package/%40fluentui-react-native/design/references/theming.md) | 主题参考、提供者、外观、钩子和遗留投影 | | [弹性颜色](https://npmcn.com/package/%40fluentui-react-native/design/references/flex-colors.md) | 编写和读取Flex颜色,从平地颜色迁移 | | [键](https://npmcn.com/package/%40fluentui-react-native/design/references/tokens.md) | 托肯源和Flex令牌绘图维护 | | [样式](https://npmcn.com/package/%40fluentui-react-native/design/references/styling.md) | 主题样式缓存和状态或颜色样式工厂 | | [颜色库](https://npmcn.com/package/%40fluentui-react-native/design/references/color-lib.md) | 原始内容 `color-lib` 算法和 Flex 交互- 颜色策略 | | [测试助手](https://npmcn.com/package/%40fluentui-react-native/design/references/testing.md) | 仅测试固定装置和对比验证 | | [入境点](https://npmcn.com/package/%40fluentui-react-native/design/references/entry-points.md) | 每个子路径和遗留的相容性包 | | [捐款](https://npmcn.com/package/%40fluentui-react-native/design/references/contributing.md) | 源头所有权、生成的文件、测试和验证 | | [剩余工作](https://npmcn.com/package/%40fluentui-react-native/design/references/remaining-work.md) | 打开主题和外表工作 | 这个 [参考索引](https://npmcn.com/package/%40fluentui-react-native/design/references/README.md) 列出每个编号的引用。 此套件的代理从 [一般事务人员(其他职等)](https://npmcn.com/package/%40fluentui-react-native/design/AGENTS.md)。 。 。 . ## 常见问题 ### @fluentui-react-native/design 是什么？ Fluent UI React Industrial的核心设计系统概念,公用事业,以及类型\. ### 如何安装 @fluentui-react-native/design？ 在项目目录运行 npm install @fluentui-react-native/design，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（18\.2\.0 \|\| 19\.0\.0 \|\| 19\.1\.4）、react-native（^0\.73\.0 \|\| ^0\.74\.0 \|\| ^0\.78\.0 \|\| ^0\.81\.6）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @fluentui-react-native/design 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @fluentui-react-native/design 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @fluentui-react-native/design 可以商用吗？ @fluentui-react-native/design 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @fluentui-react-native/design 的下载量有多少？ 根据 npm 官方下载统计，@fluentui-react-native/design 在 2026/10/15 – 2026/11/13 这 30 天内被下载 6,641 次，日均约 221 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @fluentui-react-native/design 还在维护吗？ 最新版本 0\.6\.1 发布于 2026/11/12（4 天前）；至今共发布 11 个版本，其中过去 12 个月发布了 11 个；首次发布于 2026/07/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。