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

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

版本：0\.14\.7
npm 元数据更新时间：2026-11-11T18:11:37.291Z
中文译文更新时间：2026-11-15T01:16:52.775Z
软件包许可：MIT

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

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

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

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

## 中文简介

建造HOC的工厂

## 安装

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

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

## README

# @fluentui- react-native/组合

此套件包含用于使用该套件创建的所有组件的组件工厂 `compose` 函数在 `@fluentui-react-native/framework`我们一般将这称为 `compose` 框架。 这个框架具有内置功能,可以将一个主题与一个组件合并,使其样式化,并允许使用另外两个功能扩展所创建的组件, `customize` 财务报告和审定财务报表 `compose`,可以要求组件创建一个新的组件.

部件厂采用一套选择。 选项对象允许组件的作者定义组件的 [插槽](https://npmcn.com/CONTRIBUTING.md#slots),这些槽的道具如何计算,组件的额外状态(如盘旋、按住或选择),组件的状态 [符号](https://npmcn.com/package/%40fluentui-react-native/use-tokens/README.md) 及其默认值,以及组件的渲染函数.

## 自定义

这个 `customize` API用于修改作为组件一部分的符号. [键](https://npmcn.com/package/%40fluentui-react-native/use-tokens/README.md) 控制组件样式的方面。 每个控件对它的符号有一定的默认值,这些值可能会根据控件的状态而改变. `Customize` 允许您在默认情况下更改符号的值,或更改组件的特定状态。 组件的每个状态在组件的符号集中都有一个条目,其中包含类型 `TTokens` 用于设定该状态的符号. `Customize` 可用于创建相同组件的多个不同的上下覆,从而可以比 [使用 `components` 财产 `Theme` 对象](https://npmcn.com/docs/pages/Theming/CustomTheme.md#components) 来定制您的组件。 这个 `customize` API 将使用类型参数 `TokenSettings<TTokens, TTheme>`。 。 。 .

注:不使用此函数在渲染函数内创建组件, 否则定制组件将在每次渲染时被重新创建 .

实例:

```ts
import { Theme } from '@fluentui-react-native/framework';

const CustomButton = Button.customize({
  iconSize: 10,
  spacingIconContentBefore: 10,
})

<CustomButton>Button with small icon and large gap between icon and label</CustomButton>

const CustomHoverButton = Button.customize({
  hovered: { backgroundColor: 'pink' },
})

<CustomHoverButton>Button with pink background on hover</CustomButton>

const CustomThemeButton = Button.customize((t: Theme) => ({ tokens: { backgroundColor: t.colors.neutralBackground1 }}));

<CustomHoverButton>Button uses theme entries for customization</CustomButton>
```

## 编曲

这个 `compose` 组件上的 API 用于修改输入到 `compose` 构建组件的API 。 值得注意的是,这可以用来改变 [插槽](https://npmcn.com/CONTRIBUTING.md#slots) 用于构建组件槽道具对象的组件或函数,允许组件的单个部分自定义。 还可以允许修改 `render` 函数,或哪个 `states` 应用到组件中。 作曲函数使用类型对象 `Partial<ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>>`。 。 。 .

注:不使用此函数在渲染函数内创建组件, 否则每个渲染函数上将重新创建组件 .

实例:

```ts
import { Theme, buildProps } from '@fluentui-react-native/framework';

const CustomText = Text.customize({ fontSize: 'header', color: 'hotpink' });
const ComposedButton = Button.compose({
  slots: {
    root: View,
    icon: Icon,
    content: CustomText, // changed the content slot to use large hotpink text component
  },
  slotProps: {
    content: {
      // Change the style prop of the content slot to only style margins, dropping styles from tokens.
      style: { marginTop: -1, marginBottom: 1, marginStart: 0, marginEnd: -2 },
    },
    root: buildProps(
      (tokens: ButtonTokens, _theme: Theme) => ({
        style: {
          backgroundColor: tokens.backgroundColor,
        },
      }),
      ['backgroundColor'], // key used for caching
    ),
  },
});
```

## 常见问题

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

建造HOC的工厂

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

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

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

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

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

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

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

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

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

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

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