# General Translation React SDKs (gt-react, gt-next, gt-react-native): Плагин
URL: https://generaltranslation.com/ru/docs/react/react-native/plugin.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Справочник по Babel-плагину gt-react-native от General Translation, который подключает полифилы `Intl`, необходимые React Native. Справочник по API плагина gt-react-native.

`gt-react-native/plugin` — это Babel-плагин, который подключает полифилы `Intl` из `@formatjs`, необходимые `gt-react-native`. JavaScript-рантайм React Native не включает полный набор API `Intl`, используемых для форматирования чисел, дат, форм множественного числа и названий локалей, поэтому плагин добавляет их в точку входа приложения.

Настройте его в `babel.config.js`. Он входит в стандартную [настройку](/docs/react/react-native/setup) React Native; на этой странице описано, что именно он делает и какие параметры поддерживает.

## Обзор [#overview]

Добавьте плагин в конфигурацию Babel: укажите в `entryPointFilePath` входной файл приложения и передайте локали, для которых нужно подключить полифил. Плагин — это **именованный экспорт**, поэтому извлекайте его через деструктуризацию (`const { plugin } = require('gt-react-native/plugin')`), а не используйте объект модуля напрямую.

```js title="babel.config.js"
const { plugin: gtPlugin } = require('gt-react-native/plugin');
const gtConfig = require('./gt.config.json');

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        gtPlugin,
        {
          locales: [gtConfig.defaultLocale, ...gtConfig.locales],
          entryPointFilePath: require.resolve('expo-router/entry'),
        },
      ],
    ],
  };
};
```

## Как это работает [#how-it-works]

Во время сборки, когда Babel преобразует файл по пути `entryPointFilePath`, плагин добавляет в его начало инструкции `import` для:

* Базовых полифилов `@formatjs` — `getcanonicallocales`, `locale`, `displaynames`, `listformat`, `pluralrules`, `numberformat`, `relativetimeformat` и `datetimeformat` (со всеми часовыми поясами), за исключением перечисленных в `excludePolyfills`.
* Данных локали для каждой разрешённой локали в полифилах `displaynames`, `listformat`, `pluralrules`, `numberformat`, `relativetimeformat` и `datetimeformat`.

Плагин изменяет только входной файл и пропускает импорты полифилов, которые уже есть в файле. Локали разрешаются из `locales` или, если вместо них переданы `config`/`configFilePath`, из этих параметров.

<Callout type="warn">
  **Региональные локали:** плагин использует каждый настроенный код локали без изменений
  для каждого импорта данных локали. FormatJS поддерживает не каждый региональный код
  в каждом полифиле; например, для `Intl.PluralRules` доступен `es`, но нет
  модуля `es-US`. Если сгенерированный импорт отсутствует, добавьте полифилы вручную
  ниже, чтобы в каждом импорте использовать доступный код данных локали, сохранив
  региональную локаль приложения.
</Callout>

<Accordions>
  <Accordion title="Добавить полифилы вручную">
    Если вы не хотите использовать Babel-плагин, установите пакеты FormatJS непосредственно в приложение:

    <Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
      <Tab value="npm">
        ```bash
        npm install @formatjs/intl-getcanonicallocales @formatjs/intl-locale @formatjs/intl-displaynames @formatjs/intl-listformat @formatjs/intl-pluralrules @formatjs/intl-numberformat @formatjs/intl-relativetimeformat @formatjs/intl-datetimeformat
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn add @formatjs/intl-getcanonicallocales @formatjs/intl-locale @formatjs/intl-displaynames @formatjs/intl-listformat @formatjs/intl-pluralrules @formatjs/intl-numberformat @formatjs/intl-relativetimeformat @formatjs/intl-datetimeformat
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bun add @formatjs/intl-getcanonicallocales @formatjs/intl-locale @formatjs/intl-displaynames @formatjs/intl-listformat @formatjs/intl-pluralrules @formatjs/intl-numberformat @formatjs/intl-relativetimeformat @formatjs/intl-datetimeformat
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm add @formatjs/intl-getcanonicallocales @formatjs/intl-locale @formatjs/intl-displaynames @formatjs/intl-listformat @formatjs/intl-pluralrules @formatjs/intl-numberformat @formatjs/intl-relativetimeformat @formatjs/intl-datetimeformat
        ```
      </Tab>
    </Tabs>

    Добавьте базовые полифилы и данные локали в начало входного файла, до импорта приложения. В этом примере загружаются `en` и `es-US`:

    ```js title="index.js"
    // Базовые полифилы Intl
    import '@formatjs/intl-getcanonicallocales/polyfill';
    import '@formatjs/intl-locale/polyfill';
    import '@formatjs/intl-displaynames/polyfill';
    import '@formatjs/intl-listformat/polyfill';
    import '@formatjs/intl-pluralrules/polyfill-force';
    import '@formatjs/intl-numberformat/polyfill';
    import '@formatjs/intl-relativetimeformat/polyfill';
    import '@formatjs/intl-datetimeformat/polyfill';
    import '@formatjs/intl-datetimeformat/add-all-tz';

    // Данные английской локали
    import '@formatjs/intl-displaynames/locale-data/en';
    import '@formatjs/intl-listformat/locale-data/en';
    import '@formatjs/intl-pluralrules/locale-data/en';
    import '@formatjs/intl-numberformat/locale-data/en';
    import '@formatjs/intl-relativetimeformat/locale-data/en';
    import '@formatjs/intl-datetimeformat/locale-data/en';

    // Данные локали испанского языка (США)
    import '@formatjs/intl-displaynames/locale-data/es-US';
    import '@formatjs/intl-listformat/locale-data/es-US';
    import '@formatjs/intl-pluralrules/locale-data/es';
    import '@formatjs/intl-numberformat/locale-data/es-US';
    import '@formatjs/intl-relativetimeformat/locale-data/es-US';
    import '@formatjs/intl-datetimeformat/locale-data/es-US';
    ```

    Используйте `es-US` в качестве локали приложения. `es` используйте только для импорта данных `PluralRules`, поскольку `@formatjs/intl-pluralrules` не поставляет модуль данных локали `es-US`. Сведения о других локалях и полифилах см. в [документации FormatJS по полифилам](https://formatjs.github.io/docs/polyfills).
  </Accordion>
</Accordions>

## Параметры [#options]

| Параметр                                       | Описание                                                                 | Тип        | Необязательный | По умолчанию  |
| ---------------------------------------------- | ------------------------------------------------------------------------ | ---------- | -------------- | ------------- |
| [`locales`](#locales)                          | Коды локалей, для которых нужно загрузить данные локали.                 | `string[]` | Да             | Из `config`   |
| [`entryPointFilePath`](#entry-point-file-path) | Путь к входному файлу, в который добавляются полифилы.                   | `string`   | Да             | `src/App.tsx` |
| [`config`](#config)                            | Объект конфигурации General Translation, из которого считываются локали. | `object`   | Да             | —             |
| [`configFilePath`](#config-file-path)          | Путь к `gt.config.json`, из которого считываются локали.                 | `string`   | Да             | —             |
| [`excludePolyfills`](#exclude-polyfills)       | Базовые полифилы, которые нужно пропустить.                              | `string[]` | Да             | `[]`          |

### `locales` [#locales]

**Тип** `string[]` · **Необязательно**

Коды локалей, для которых нужно загрузить данные локали `@formatjs`. Укажите локаль по умолчанию и все целевые локали, например `[gtConfig.defaultLocale, ...gtConfig.locales]`. Если параметр не указан, локали определяются из `config` или `configFilePath`.

### `entryPointFilePath` [#entry-point-file-path]

**Тип** `string` · **Необязательно** · **По умолчанию** `src/App.tsx`

Абсолютный путь к файлу, в который добавляются импорты полифила. Это должна быть реальная точка входа вашего приложения. Обычно используют `require.resolve('expo-router/entry')` для Expo и `path.resolve(__dirname, 'index.js')` для React Native CLI без Expo.

### `config` [#config]

**Тип** `{ defaultLocale: string; locales: string[] } & Record<string, unknown>` · **Необязательно**

Объект конфигурации General Translation, из которого можно получать локали вместо прямой передачи `locales`.

### `configFilePath` [#config-file-path]

**Тип** `string` · **Необязательно**

Путь к файлу `gt.config.json`, на основе которого определяются локали, как альтернатива передаче `locales` или `config`.

### `excludePolyfills` [#exclude-polyfills]

**Тип** `string[]` · **Необязательно** · **По умолчанию** `[]`

Пути импорта базовых полифилов, которые нужно пропустить, если вы подключаете один из них самостоятельно. Значения должны совпадать с путями импорта базовых полифилов плагина, например `@formatjs/intl-datetimeformat/add-all-tz`.

## Пример [#example]

Базовый React Native CLI с `index.js` в качестве точки входа:

```js title="babel.config.js"
const path = require('path');
const { plugin: gtPlugin } = require('gt-react-native/plugin');
const gtConfig = require('./gt.config.json');

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    [
      gtPlugin,
      {
        locales: [gtConfig.defaultLocale, ...gtConfig.locales],
        entryPointFilePath: path.resolve(__dirname, 'index.js'),
      },
    ],
  ],
};
```

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.