# react-native: Dizionari
URL: https://generaltranslation.com/it/docs/react-native/guides/dictionaries.mdx
---
title: Dizionari
description: Come usare i tradizionali approcci di traduzione basati su dizionari
---

{/* GENERATO AUTOMATICAMENTE: non modificare direttamente. Modifica il modello in content/docs-templates/. */}

I dizionari offrono un approccio tradizionale per organizzare le traduzioni in oggetti annidati con coppie chiave-valore. Sebbene i [componenti `<T>`](/docs/react-native/guides/t) siano l&#39;approccio consigliato, i dizionari possono essere utili per migrare da altre librerie i18n o se preferisci un archivio centralizzato delle traduzioni.

<Callout>
  **Raccomandazione:** Usa i [componenti `<T>`](/docs/react-native/guides/t) nei nuovi progetti. I dizionari sono supportati principalmente per la migrazione e per garantire la compatibilità con i flussi di lavoro di traduzione esistenti.
</Callout>


## Traduzione con dizionario vs traduzione tramite componenti

### Pattern del dizionario

```tsx
// dictionary.ts
export default {
  greetings: {
    hello: 'Hello, world!',
    welcome: 'Welcome, {name}!'
  }
};

// Utilizzo del componente
function MyComponent() {
  const t = useTranslations();
  return <div>{t('greetings.hello')}</div>;
}
```


### Pattern dei componenti

```tsx
// Utilizzo diretto del componente - consigliato
function MyComponent() {
  return <T><div>Hello, world!</div></T>;
}
```

## Compromessi

### Vantaggi del dizionario

* **Archiviazione centralizzata** - Tutte le traduzioni in un unico posto
* **Standard di settore** - Un approccio familiare per chi usa altre librerie di i18n
* **Facilita la migrazione** - Facile trasferire traduzioni esistenti

### Svantaggi del dizionario

* **Complessità** - Richiede più setup e configurazione
* **Manutenibilità** - Separare i contenuti dal loro utilizzo rende gli aggiornamenti più difficili
* **Debuggabilità** - È più difficile ricondurre le traduzioni ai componenti
* **Leggibilità** - Le chiavi non mostrano il contenuto reale

## Guida rapida

### Passaggio 1: Crea un dizionario

Crea un file di dizionario nella radice del progetto o nella directory `src`:

```ts title="dictionary.ts"
const dictionary = {
  greetings: {
    hello: 'Hello, world!',
    welcome: 'Welcome to our app!'
  },
  navigation: {
    home: 'Home',
    about: 'About',
    contact: 'Contact'
  }
};

export default dictionary;
```

Oppure usa il formato JSON:

```json title="dictionary.json"
{
  "greetings": {
    "hello": "Hello, world!",
    "welcome": "Welcome to our app!"
  },
  "navigation": {
    "home": "Home", 
    "about": "About",
    "contact": "Contact"
  }
}
```

Quindi passalo al componente [`<GTProvider>`](/docs/react-native/api/components/gtprovider):

```jsx title="index.js" copy
import dictionary from "./dictionary.js";
import config from "./gt.config.json";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    {/* [!code highlight] */}
    <GTProvider {...config} dictionary={dictionary}>
      <App />
    </GTProvider>
  </StrictMode>
);
```


### Passaggio 2: utilizzo nei componenti

L&#39;hook [`useTranslations`](/docs/react-native/api/dictionary/use-translations) ti permette di accedere alle voci del dizionario:

```tsx
import { useTranslations } from 'gt-react-native';

function MyComponent() {
  const t = useTranslations();
  
  return (
    <div>
      <h1>{t('greetings.hello')}</h1>
      <p>{t('greetings.welcome')}</p>
    </div>
  );
}
```


## Utilizzo delle variabili

Aggiungi le variabili alle voci del dizionario usando la sintassi `{variable}`:

```ts title="dictionary.ts"
const dictionary = {
  user: {
    greeting: 'Hello, {name}!',
    itemCount: 'You have {count} items',
    orderTotal: 'Total: ${amount}'
  }
};
```

```tsx
function UserDashboard() {
  const t = useTranslations();
  
  return (
    <div>
      <h1>{t('user.greeting', { name: 'Alice' })}</h1>
      <p>{t('user.itemCount', { count: 5 })}</p>
      <p>{t('user.orderTotal', { amount: 99.99 })}</p>
    </div>
  );
}
```


## Uso dei prefissi

Limita l&#39;accesso al dizionario a sezioni specifiche tramite prefissi:

```ts title="dictionary.ts"
const dictionary = {
  dashboard: {
    header: {
      welcome: 'Welcome back!',
      lastLogin: 'Last login: {date}'
    },
    stats: {
      totalUsers: 'Total Users: {count}',
      activeUsers: 'Active Users: {count}'
    }
  }
};
```

```tsx
function DashboardHeader() {
  // Il prefisso limita l'accesso a 'dashboard.header'
  const t = useTranslations('dashboard.header');
  
  return (
    <header>
      <h1>{t('welcome')}</h1> {/* -> dashboard.header.welcome */}
      <p>{t('lastLogin', { date: 'Today' })}</p> {/* -> dashboard.header.lastLogin */}
    </header>
  );
}

function DashboardStats() {
  // Prefisso diverso per la sezione stats
  const t = useTranslations('dashboard.stats');
  
  return (
    <div>
      <p>{t('totalUsers', { count: 1000 })}</p> {/* -> dashboard.stats.totalUsers */}
      <p>{t('activeUsers', { count: 150 })}</p> {/* -> dashboard.stats.activeUsers */}
    </div>
  );
}
```


## Supporto multilingue

### Traduzione automatica (consigliata)

La maggior parte degli utenti dovrebbe utilizzare [`loadTranslations`](/docs/react-native/api/config/load-translations) per generare automaticamente le traduzioni a partire dal dizionario di base:

```ts title="dictionary.ts"  
const dictionary = {
  common: {
    save: 'Save',
    cancel: 'Cancel',
    delete: 'Delete'
  },
  forms: {
    required: 'This field is required',
    email: 'Please enter a valid email'
  }
};

export default dictionary;
```

Quindi crea una funzione `loadTranslations` per caricare i file di traduzione generati:

```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
  const translations = await import(`./_gt/${locale}.json`);
  return translations.default;
}
```

Passalo al tuo `<GTProvider>`:

```tsx title="src/index.tsx"
import loadTranslations from './loadTranslations';
import dictionary from './dictionary';

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider
      {...config}
      dictionary={dictionary}
      loadTranslations={loadTranslations}
    >
      <App />
    </GTProvider>
  </StrictMode>
);
```

GT genera automaticamente le traduzioni per le altre lingue a partire dal dizionario di base. Esegui `npx gt translate` per generare le traduzioni per tutte le lingue configurate.


### File di traduzione manuali (migrazione)

Per migrare da altre librerie i18n o da una gestione manuale delle traduzioni, usa [`loadDictionary`](/docs/react-native/api/config/load-dictionary):

```ts title="src/loadDictionary.ts"
export default async function loadDictionary(locale: string) {
  const translations = await import(`../public/locales/${locale}.json`);
  return translations.default;
}
```

Questo carica i file di traduzione JSON dalla directory `public/locales/`:

<Files>
  <Folder name="my-app" defaultOpen={true}>
    <Folder name="public" defaultOpen={true}>
      <Folder name="locales" defaultOpen={true}>
        <File name="es.json" />

        <File name="fr.json" />

        <File name="de.json" />
      </Folder>
    </Folder>

    <Folder name="src">
      <File name="loadDictionary.ts" />
    </Folder>
  </Folder>
</Files>

<Callout>
  **Scegli l&#39;approccio giusto:** Usa [`loadTranslations`](/docs/react-native/api/config/load-translations) per i nuovi progetti con generazione automatica delle traduzioni, oppure [`loadDictionary`](/docs/react-native/api/config/load-dictionary) se stai migrando file di traduzione esistenti.
</Callout>


## Setup di produzione

### Processo di build

Integra la traduzione nella pipeline di build:

```json title="package.json"
{
  "scripts": {
    "build": "npx gt translate && <...YOUR_BUILD_COMMAND...>"
  }
}
```


### Comportamento in sviluppo e in produzione

* **Sviluppo**: Voci del dizionario tradotte su richiesta con la chiave API di sviluppo
* **Produzione**: Tutte le traduzioni del dizionario vengono generate in fase di build

## In combinazione con i componenti

I dizionari e i [componenti `<T>`](/docs/react-native/guides/t) possono essere usati insieme:

```tsx
function MixedApproach() {
  const t = useTranslations();
  
  return (
    <div>
      {/* Dizionario per cadene semplici */}
      <h1>{t('page.title')}</h1>
      
      {/* Componente T per JSX complesso */}
      <T>
        <p>This is a <strong>complex message</strong> with <a href="/link">links</a>.</p>
      </T>
      
      {/* Dizionario per le etichette del form */}
      <label>{t('forms.email')}</label>
    </div>
  );
}
```


## Passaggi successivi

<Callout>
  **Vedi in azione:** Dai un&#39;occhiata all&#39;[app di esempio del pattern del dizionario](https://github.com/gt-examples/dictionary-pattern) per una demo funzionante — [anteprima online](https://dictionary-pattern.generaltranslation.dev).
</Callout>

* [Guida alle lingue](/docs/react-native/guides/languages) - Configura le lingue supportate e le impostazioni delle impostazioni regionali
* [Guida ai contenuti dinamici](/docs/key-concepts/dynamic-content) - Gestisci le esigenze di traduzione in fase di runtime
* Riferimenti API:
  * [Hook `useTranslations`](/docs/react-native/api/dictionary/use-translations)