# @fluentui-react-native/theme 中文文档

规范地址：https://npmcn.com/package/%40fluentui-react-native/theme/

版本：0\.14\.12
npm 元数据更新时间：2026-11-11T18:07:30.974Z
中文译文更新时间：2026-11-15T02:44:02.371Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40fluentui-react-native/theme
原文对照：https://npmcn.com/package/%40fluentui-react-native/theme/?lang=original
项目主页：https://github.com/microsoft/fluentui-react-native#readme
源码仓库：https://github.com/microsoft/fluentui-react-native

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：77.1 kB，10 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 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
- 首次发布：2020-09-25T18:00:14.717Z
- 最新版本发布：2026-11-11T18:07:30.755Z
- 近 30 天下载量：2756（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：119（近 12 个月 15 个）

## 中文简介

流体反应-本土主题框架实验版

## 安装

```sh
npm install @fluentui-react-native/theme
```

也可以使用：`pnpm add @fluentui-react-native/theme`、`yarn add @fluentui-react-native/theme`、`bun add @fluentui-react-native/theme`

## README

# @fluentui-react-native/主题

这个包是相容的 shim. 主题框架 `ThemeReference` 类和 `ThemeProvider` 执行——现在生活在 `@fluentui-react-native/design` 并且通过它暴露 `@fluentui-react-native/design/theming` 子模块。 此套件会再导出它们, 这样现有的 `@fluentui-react-native/theme` 入口继续工作;新代码应从 `@fluentui-react-native/design/theming`。 。 。 .

## `ThemeReference`

构造一个 `Theme` 以另一个完全建成的 `Theme` 或父母关系 `ThemeReference`,然后分层 `PartialTheme` 碎片,或 `ThemeTransform` 函数。 然后提供无效的能力,更新碎片的能力,以及倾听主题变化的能力.

### 创建一个 `ThemeReference`

引用通过结合以零或多处食谱为底来创建.

-   **基础** - 要么是一个 `Theme` 或另一个 `ThemeReference`
-   **食谱** - 要么是一个 `PartialTheme` 或窗体的函数 `(parent: Theme) => PartialTheme`

这个 `ThemeReference` 支持下列方法:

-   **`theme`** - 获得已建主题, 被执行为在被询问时动态创建的主题
-   **`invalidate()`** - 让参考文献知道有什么变化, 这将重放曲目 生成一个新的主题
-   **`update(...recipes)`** - 更新用于构建主题的食谱,也将使引用无效
-   **`addOnThemeChanged(listener)`** - 增加一个被通知主题变化的听众
-   **`removeOnThemeChanged(listener)`** - 移除听众

在实践中,这可用于执行一个主题,这个主题具有一些来自外部调用(可能是本地模块)的值,并在这些值变化时重建自己. 这看起来像是:

```ts
import { defaultFluentTheme } from '@fluentui-react-native/default-theme';
import { ThemeReference } from '@fluentui-react-native/design/theming';

// in this case wrapping the reference in a function makes it easy to encapsulate the invalidating
export const createMyCustomTheme = () => {
  // create the reference
  const themeRef = new ThemeReference(
    // base it on the default fluent theme
    defaultFluentTheme,
    // mix in some constant values to override
    {
      colors: {
        // stuff here
      },
    },
    // make some outside calls to get some values
    () => {
      // query a body background from somewhere else
      const bodyBackground = checkSomeOutsideValue();
      return {
        colors: {
          bodyBackground,
        },
      };
    },
  );
  // register a change handler that invalidates the reference
  listenForOutsideValueChange(() => {
    themeRef.invalidate();
  });
  return themeRef;
};
```

## `ThemeProvider`

这是一个标准上下文提供者,将主题引用作为主题道具的投入.

## 常见问题

### @fluentui-react-native/theme 是什么？

流体反应-本土主题框架实验版

### 如何安装 @fluentui-react-native/theme？

在项目目录运行 npm install @fluentui-react-native/theme，或使用 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/theme 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @fluentui-react-native/theme 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @fluentui-react-native/theme 可以商用吗？

@fluentui-react-native/theme 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @fluentui-react-native/theme 的下载量有多少？

根据 npm 官方下载统计，@fluentui-react-native/theme 在 2026/10/15 – 2026/11/13 这 30 天内被下载 2,756 次，日均约 92 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @fluentui-react-native/theme 还在维护吗？

最新版本 0\.14\.12 发布于 2026/11/12（4 天前）；至今共发布 119 个版本，其中过去 12 个月发布了 15 个；首次发布于 2020/09/26。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。