# react-native: Num
URL: https://generaltranslation.com/zh/docs/react-native/api/components/num.mdx
---
title: Num
description: Num 组件的 API 参考
---

{/* 自动生成：请勿直接编辑。请改为编辑 content/docs-templates/ 中的 template。 */}


## 概述

`<Num>` 组件会按用户的区域设置渲染格式化后的数字字符串，并可通过格式化选项进行自定义。

```jsx
<Num>{100}</Num>
// 输出：100
```

所有重新格式化都在本地通过 [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) 库完成。


## 参考

### 属性

<TypeTable
  type={{
  "children?": {
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "name?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "value?": {
      type: 'string | number',
      optional: true,
      default: 'undefined',
  },
  "options?": {
      type: 'Intl.NumberFormatOptions',
      optional: true,
      default: '{}',
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
}}
/>

### 说明

| Prop       | 说明                                                                                                                                                                                  |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | 在组件内部渲染的内容。通常为数字，会根据当前区域设置和选项进行格式化。如果提供了该值，则其优先级高于 `value` prop。                                                                                                                    |
| `name`     | 数字字段的可选名称，用于元数据。                                                                                                                                                                    |
| `value`    | 数字的默认值。可以是字符串或数字。字符串会在格式化前解析为数字。                                                                                                                                                    |
| `options`  | 数字的可选格式化选项，遵循 [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) 规范。可用于定义货币、小数精度等格式样式。                |
| `locales`  | 用于指定格式化区域设置的可选 `locales`。如果未提供，则使用用户的默认区域设置。有关如何指定 `locales` 的更多信息，请参阅[此处](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument)。 |

### 返回值

包含格式化后的数字字符串的 `JSX.Element`。

***

## 示例

### 基本示例

在此示例中，`item.quantity` 会按照用户的区域设置重新格式化。

```jsx title="QuantityDisplay.jsx" copy
import { Num } from 'gt-react-native';

export default function Inventory(item) {
  return (
    <Num> {item.quantity} </Num>  // [!code highlight]
  );
}
```


### 指定区域设置

默认情况下，区域设置由用户的浏览器设置决定，
但你也可以为 `<Num>` 组件明确指定区域设置。

```jsx title="PriceDisplay.jsx" copy
import { Num } from 'gt-react-native';

export default function CountDisplay(item) {
  return (
    <Num locales={['fr-FR']}> {item.count} </Num> // [!code highlight]
  );
}
```


### 翻译 Num 组件

假设你想让这个数字出现在一个需要翻译的较长句子里。
只需在内容外面加上 `<T>` 组件即可。

```jsx title="DynamicPriceDisplay.jsx" copy
import { T, Num } from 'gt-react-native';

export default function DynamicPriceDisplay(item) {
  return (
    <T id="price">
      There are <Num> {item.count} </Num> units available. // [!code highlight]
    </T>
  );
}
```


### 自定义格式

`<Num>` 使用 [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) 库来进行格式化。

```jsx
import { Num } from 'gt-react-native';

export default function CustomFormat(number) {
  return (
    <Num
      options={{ style: "decimal", maximumFractionDigits: 2 }}
    >
      {number}
    </Num>
  );
}
```

***


## 注意事项

* `<Num>` 组件用于按用户的区域设置格式化数字。
* 在 `<T>` 组件内时，请确保将所有动态数字都包裹在 `<Num>` 组件中。

## 后续步骤

* 如需了解 `<Num>` 组件以及其他变数组件 (如 `<Currency>`、`<DateTime>` 和 `<Var>`) 的更多信息和使用示例，请参阅[使用变数组件](/docs/react-native/guides/variables)文档。