# react-native: Currency
URL: https://generaltranslation.com/ru/docs/react-native/api/components/currency.mdx
---
title: Currency
description: Справочная документация по API компонента Currency
---

{/* АВТОМАТИЧЕСКИ СГЕНЕРИРОВАНО: Не редактируйте напрямую. Отредактируйте шаблон в content/docs-templates/. */}

## Обзор

Компонент `<Currency>` отображает числовое значение в формате валюты.
Число форматируется с учетом текущей локали и любых переданных необязательных параметров.
Компонент `<Currency>` отвечает только за форматирование и не выполняет никаких расчетов обменного курса.

```jsx
<Currency>{100}</Currency>
// Вывод: $100.00
```

Все операции форматирования выполняются локально с помощью библиотеки [`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?": {
      description: 'Необязательное значение. Если оно не указано, в качестве значения будут использоваться `children`.',
      type: 'string | number',
      optional: true,
      default: 'undefined',
  },
  "currency?": {
      type: 'string',
      optional: true,
      default: '"USD"',
  },
  "options?": {
      type: 'Intl.NumberFormatOptions',
      optional: true,
      default: '{}',
  },
  "locales?": {
      type: 'string[]',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Описание

| Свойство   | Описание                                                                                                                                                                                                                                                                                                                   |
| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | Содержимое, которое будет отображаться внутри компонента. Обычно это число — значение, которое нужно отформатировать как валюту. Если передано, имеет приоритет над пропом `value`.                                                                                                                                        |
| `name`     | Необязательное имя поля валюты, используемое для метаданных.                                                                                                                                                                                                                                                               |
| `value`    | Значение валюты по умолчанию. Если не указано, используется `children`. Может быть строкой или числом. Перед форматированием строки преобразуются в числа.                                                                                                                                                                 |
| `currency` | Тип валюты, например &quot;USD&quot; или &quot;EUR&quot;. Определяет символ и форматирование, используемые для валюты.                                                                                                                                                                                                     |
| `options`  | Необязательные параметры форматирования валюты в соответствии со [спецификацией `Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat). Используйте их, чтобы задать, например, максимальное количество знаков после запятой, группировку и т. д. |
| `locales`  | Необязательные локали для указания локали форматирования. Если не указаны, используется локаль пользователя по умолчанию. Подробнее о том, как задавать локали, читайте [здесь](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).                                   |

### Возвращает

`JSX.Element`, содержащий значение валюты, отформатированное в виде строки.

***

## Примеры

### Базовый пример

Компонент `<Currency>` можно использовать для отображения денежных значений в соответствии с локалью.

```jsx title="PriceDisplay.jsx" copy
import { Currency } from 'gt-react-native'; // [!code highlight]

export default function PriceDisplay(item) {
    return (
        <Currency> {item.price} </Currency> // [!code highlight]
    );
}
```

### Указание валюты

Здесь мы отображаем цену в евро.

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

export default function PriceDisplay(item) {
  return (
    <Currency currency="EUR"> {item.price} </Currency> // [!code highlight]
  );
}
```

### Перевод компонентов Currency

Предположим, вы хотите, чтобы значение в валюте отображалось в предложении, которое тоже переводится.
Вы можете обернуть компонент `<Currency>` в компонент `<T>`.

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

export default function PriceDisplay(item) {
  return (
    <T id="itemPrice"> // [!code highlight]
      Цена составляет <Currency> {item.price} </Currency>.
    </T> // [!code highlight]
  );
}
```

### Пользовательское форматирование

Здесь мы отображаем цену в GBP, точно задавая количество знаков после запятой и используя узкий символ валюты (то есть &quot;$100&quot; вместо &quot;US$100&quot;).
Подробнее о других параметрах см. в [Intl.NumberFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).

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

export default function PriceDisplay(item) {
  return (
    <Currency
      currency="GBP"
      options={{ // [!code highlight]
        currencyDisplay: 'narrowSymbol', // [!code highlight]
        minimumFractionDigits: 2, // [!code highlight]
        maximumFractionDigits: 2, // [!code highlight]
      }} // [!code highlight]
    >
      {item.price}
    </Currency>
  );
}
```

***

## Примечания

* Компонент `<Currency>` используется для форматирования денежных значений в соответствии с текущей локалью и любыми переданными необязательными параметрами.
* Компонент `<Currency>` отвечает только за форматирование и не выполняет никаких расчётов обменного курса.
* Содержимое компонента `<Currency>` не будет отправляться в API для перевода.
  Всё переформатирование выполняется локально с помощью библиотеки [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).

## Следующие шаги

* Подробнее о компоненте `<Currency>` и других переменных компонентах, таких как `<Num>`, `<DateTime>` и `<Var>`, см. в документации [Использование переменных компонентов](/docs/react-native/guides/variables).