# General Translation React SDKs (gt-react, gt-next, gt-react-native): Plugin
URL: https://generaltranslation.com/it/docs/react/react-native/plugin.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Riferimento per il plugin Babel gt-react-native di General Translation, che aggiunge i polyfill `Intl` necessari a React Native. Riferimento API per il plugin gt-react-native.

`gt-react-native/plugin` è un plugin Babel che aggiunge i polyfill `Intl` di `@formatjs` necessari a `gt-react-native`. Il runtime JavaScript di React Native non include tutte le API `Intl` usate per formattare numeri, date, plurali e nomi delle impostazioni regionali, quindi il plugin le aggiunge all'entry point della tua app.

Configuralo in `babel.config.js`. Fa parte della [setup](/docs/react/react-native/setup) standard di React Native; questa pagina ne descrive il funzionamento e le opzioni.

## Panoramica [#overview]

Aggiungi il plugin alla configurazione di Babel, impostando `entryPointFilePath` sul file di ingresso della tua app e passando le impostazioni regionali per cui applicare il polyfill. Il plugin è una **named export**, quindi destrutturalo (`const { plugin } = require('gt-react-native/plugin')`) invece di usare direttamente l'oggetto del modulo.

```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'),
        },
      ],
    ],
  };
};
```

## Come funziona [#how-it-works]

In fase di build, quando Babel trasforma il file in `entryPointFilePath`, il plugin antepone istruzioni `import` per:

* I polyfill `@formatjs` di base — `getcanonicallocales`, `locale`, `displaynames`, `listformat`, `pluralrules`, `numberformat`, `relativetimeformat` e `datetimeformat` (con tutti i fusi orari) — a eccezione di quelli elencati in `excludePolyfills`.
* I dati delle impostazioni regionali per ogni impostazione regionale risolta, per i polyfill `displaynames`, `listformat`, `pluralrules`, `numberformat`, `relativetimeformat` e `datetimeformat`.

Modifica solo il file di ingresso e ignora gli import di polyfill già presenti. Le impostazioni regionali vengono risolte a partire da `locales` oppure da `config`/`configFilePath`, se vengono forniti.

<Callout type="warn">
  **Impostazioni regionali:** Il plugin usa invariato ogni codice locale configurato
  per ogni importazione di dati dell&#39;impostazione regionale. FormatJS non fornisce tutti i codici regionali
  per ogni polyfill; ad esempio, `Intl.PluralRules` fornisce `es` ma non un
  modulo `es-US`. Se manca un&#39;importazione generata, aggiungi manualmente i polyfill
  qui sotto affinché ogni importazione possa usare un codice di dati dell&#39;impostazione regionale disponibile, mentre la tua app
  mantiene la propria impostazione regionale.
</Callout>

<Accordions>
  <Accordion title="Aggiungi manualmente i polyfill">
    Se non vuoi usare il plugin Babel, installa direttamente i package FormatJS nella tua app:

    <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>

    Aggiungi i polyfill di base e i dati delle impostazioni regionali all&#39;inizio del file di ingresso, prima di importare l&#39;applicazione. Questo esempio carica `en` e `es-US`:

    ```js title="index.js"
    // Polyfill Intl di base
    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';

    // Dati dell'impostazione regionale inglese
    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';

    // Dati dell'impostazione regionale spagnola degli Stati Uniti
    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';
    ```

    Mantieni `es-US` come impostazione regionale dell&#39;app. Usa `es` solo per l&#39;importazione dei dati di `PluralRules`, perché `@formatjs/intl-pluralrules` non include un modulo di dati dell&#39;impostazione regionale `es-US`. Consulta la [documentazione sui polyfill di FormatJS](https://formatjs.github.io/docs/polyfills) per altre impostazioni regionali e altri polyfill.
  </Accordion>
</Accordions>

## Opzioni [#options]

| Opzione                                        | Descrizione                                                                | Tipo       | Facoltativo | Predefinito   |
| ---------------------------------------------- | -------------------------------------------------------------------------- | ---------- | ----------- | ------------- |
| [`locales`](#locales)                          | Codici locale per cui caricare i dati delle impostazioni regionali.        | `string[]` | Sì          | Da `config`   |
| [`entryPointFilePath`](#entry-point-file-path) | Percorso del file entry point a cui vengono aggiunti i polyfill.           | `string`   | Sì          | `src/App.tsx` |
| [`config`](#config)                            | Oggetto di configurazione di General Translation da cui leggere `locales`. | `object`   | Sì          | —             |
| [`configFilePath`](#config-file-path)          | Percorso di un file `gt.config.json` da cui leggere `locales`.             | `string`   | Sì          | —             |
| [`excludePolyfills`](#exclude-polyfills)       | Polyfill di base da escludere.                                             | `string[]` | Sì          | `[]`          |

### `locales` [#locales]

**Tipo** `string[]` · **Facoltativo**

I codici delle impostazioni regionali per cui caricare i dati di `@formatjs` relativi alle impostazioni regionali. Includi la tua impostazione regionale predefinita e ogni impostazione regionale di destinazione, ad esempio `[gtConfig.defaultLocale, ...gtConfig.locales]`. Se omesso, `locales` viene ricavato da `config` o `configFilePath`.

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

**Tipo** `string` · **Facoltativo** · **Predefinito** `src/App.tsx`

Percorso assoluto del file in cui vengono inseriti gli import del polyfill. Deve essere il vero entry point della tua app. I valori più comuni sono `require.resolve('expo-router/entry')` per Expo e `path.resolve(__dirname, 'index.js')` per React Native CLI in modalità bare.

### `config` [#config]

**Tipo** `{ defaultLocale: string; locales: string[] } & Record<string, unknown>` · **Facoltativo**

Un oggetto di configurazione di General Translation da cui ricavare le impostazioni regionali, come alternativa al passaggio diretto di `locales`.

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

**Tipo** `stringa` · **Facoltativo**

Percorso di un file `gt.config.json` da cui ricavare le impostazioni regionali, in alternativa a passare `locales` o `config`.

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

**Tipo** `string[]` · **Facoltativo** · **Predefinito** `[]`

Percorsi di importazione dei polyfill di base da ignorare, se ne fornisci uno tu. I valori devono corrispondere ai percorsi di importazione dei polyfill di base del plugin, ad esempio `@formatjs/intl-datetimeformat/add-all-tz`.

## Esempio [#example]

React Native CLI puro, con `index.js` come punto di ingresso:

```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.