# @fluentui-react-native/use-tokens 中文文档

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

版本：0\.9\.7
npm 元数据更新时间：2026-11-11T18:01:43.666Z
中文译文更新时间：2026-11-15T01:18:53.961Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：115 kB，61 个文件
- 模块格式：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
- 首次发布：2021-07-21T22:53:18.859Z
- 最新版本发布：2026-11-11T18:01:43.390Z
- 近 30 天下载量：4127（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：46（近 12 个月 12 个）

## 中文简介

为组件取出符号的公用事业和钩子功能

## 安装

```sh
npm install @fluentui-react-native/use-tokens
```

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

## README

# @fluentui- react-native/use-tokes (英语)

此套件提供了创建钩子函数的手段来从被传递的主题中构建出一组令牌,以及给定钩子函数和主题的配对独有的缓存对象. 这些已解析的符号应该用来为您的组件构建样式 。 这样,一个组件的外观和感觉就可以从常量,主题全局,甚至组件特定覆盖来建立起来.

## 键

一个符号仅仅是一个显示组件样式的设置. 这些可以被认为是框架自动所建的附加组件道具. 通常设定在组件创建时间或被一个主题所覆盖,但可以从多种来源获得:

-   **对象** - 这是一个对象内包含的一组值。 假设这些值在物体的寿命期间保持不变.
-   **主题函数** - 允许在一个主题中设定与值相关的值。 一个例子是,在主题中的彩色调色板中为特定条目设置颜色.
-   **搜索名称** - 这将查询此组件的符号对象或主题函数的主题 .

## 实例

该系统的核心思想是: **`Tokens + Theme ==> Styles`**。这可以被认为是:

-   您的作风是通过配方制作的,最好通过返回的缓存或使用 `useMemo` 钩子或等同物
-   代币是你的配方
-   其中一些信物来自常数
-   有些信物来自主题

该方法的总体特征如下:

```ts
export type StyledTextTokens = Pick<TextProps[style], 'color', 'fontFamily', 'fontWeight', 'fontSize'>;

const useTokens = buildUseTokens<StyledTextTokens, Theme>(
  /* function for looking up a component in a theme, allows this to be used independently of the shape of the theme */
  getComponentInfoFromTheme,

  /* Start of tokens, these are applied in order */
  /* object, these are effectively constants to be used as defaults */
  { token1: 'foo', token2: 400 },
  /* theme function */
  (theme: Theme) => ({ token3: theme.colors.backgroundColor }),
  /* name to lookup */
  'NameToLookup',
);
```

这个 `useTokens` 然后可以使用钩来构建组件的样式如下:

```tsx
const StyledText: React.FunctionComponent<TextProps> = (props) => {
  // split the props
  const { style, children, ...rest } = props;

  // left out of the hook to allow theme to be obtained in whatever way is appropriate. Generally from a context.
  const theme = useTheme();

  // get a set of tokens from the theme
  const [tokens, cache] = useTokens(theme);

  // create a style object from the tokens using the cache. Note that if all the tokens are actually directly styles the tokens could be used
  // directly. This is just to illustrate the pattern for a more complex component
  const [tokenStyle] = cache(() => ({ ...tokens }), []);

  // now merge any styles coming from the props in on top as they should override
  const mergedStyles = mergeStyles<TextStyle>(tokenStyle, style);

  // now just render the text element
  return (
    <Text {...rest} style={mergedStyles}>
      {children}
    </Text>
  );
};
```

### 层层

这些令牌会按照它们在数组中出现的顺序被深刻地合并.

```js
const mergedTokens = merge(
  ...options.tokens.map(entry => {
    // string gets converted to object or function (or empty object)
    if (typeof entry === 'string') {
      entry = themeHelper.getComponentInfo(entry) || {};
    }
    // return either the function call (which will produce an object) or the object
    return typeof entry === 'function' ? entry(theme) : entry;
  });
);
```

## 常见问题

### @fluentui-react-native/use-tokens 是什么？

为组件取出符号的公用事业和钩子功能

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

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

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

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

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

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

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

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

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

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

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