# react-native: Panoramica URL: https://generaltranslation.com/it/docs/react-native/introduction.mdx --- title: Panoramica description: Panoramica dell'SDK React Native di General Translation --- {/* GENERATO AUTOMATICAMENTE: non modificare direttamente. Modifica invece il modello in content/docs-templates/. */} ## Introduzione L'SDK React Native di General Translation è una libreria open source per l'internazionalizzazione (i18n) delle applicazioni React Native. Offre un set completo di strumenti per internazionalizzare la tua applicazione React Native in modo semplice e facile da mantenere, con parità di funzionalità rispetto ad altre popolari librerie i18n. L'SDK può essere usato in modo autonomo senza la piattaforma General Translation e si comporta in modo simile ad altre librerie i18n. Tuttavia, si integra anche con la nostra piattaforma per offrire funzionalità avanzate: * Hot reloading delle traduzioni in fase di sviluppo * Traduzioni automatiche con IA * Sincronizzazione delle traduzioni con la piattaforma General Translation * Integrazione nativa con la nostra CDN per le traduzioni ## Concetti Ci sono 5 concetti principali da capire sull'SDK. Il componente [``](/docs/react-native/api/components/gtprovider) Il componente [``](/docs/react-native/api/components/t) L'hook [`useGT`](/docs/react-native/api/strings/use-gt) La funzione [`msg`](/docs/react-native/api/strings/msg) per le stringhe condivise (Opzionale) L'hook [`useTranslations`](/docs/react-native/api/dictionary/use-translations) ## Il componente `` Il componente [``](/docs/react-native/api/components/gtprovider) fornisce all'applicazione il contesto di traduzione, inclusi la lingua corrente e le relative traduzioni. ```tsx import { GTProvider } from 'gt-react-native'; function App() { return (
{/* Il contenuto della tua applicazione */}
); } ``` **Importante:** il provider deve racchiudere l'intera applicazione ed essere posizionato il più in alto possibile nell'albero dei componenti, ad esempio nel componente `App` radice. Per ulteriori informazioni, consulta il riferimento API di [`GTProvider`](/docs/react-native/api/components/gtprovider). ## Il componente `` Il componente [``](/docs/react-native/api/components/t) è il modo consigliato per tradurre i contenuti della tua applicazione. È un componente React che può essere usato per racchiudere qualsiasi elemento JSX e renderizza automaticamente il contenuto dell'elemento in una lingua supportata. Ti consigliamo di usare il componente [``](/docs/react-native/api/components/t) quando possibile, perché offre la massima flessibilità per le traduzioni. A differenza delle stringhe, il componente [``](/docs/react-native/api/components/t) può essere usato per tradurre contenuti HTML, risultando quindi molto più potente delle traduzioni basate su stringhe. ### Esempi ```tsx
Hello, world!
 ``` ```tsx

Here is an image

Example
``` ```tsx Formatting can be done easily with the `` component. {1000} {new Date()} {1000} ``` Il componente [``](/docs/react-native/api/components/t) funziona con [componenti per variabili](/docs/react-native/guides/variables) come [``](/docs/react-native/api/components/num), [``](/docs/react-native/api/components/datetime) e [``](/docs/react-native/api/components/currency) per la formattazione dinamica dei contenuti. Consulta la [guida al componente [``]](/docs/react-native/guides/t) per scoprire i diversi modi in cui puoi utilizzare il componente [``](/docs/react-native/api/components/t). ## L'hook `useGT` L'hook [`useGT`](/docs/react-native/api/strings/use-gt) è un hook di React che può essere utilizzato in modo simile al componente [``](/docs/react-native/api/components/t), con alcuni compromessi. L'hook restituisce una funzione che può essere usata per tradurre stringhe. ```tsx const gt = useGT(); gt('Hello, world!'); ``` Rispetto al componente [``](/docs/react-native/api/components/t), l'hook [`useGT`](/docs/react-native/api/strings/use-gt) offre una maggiore flessibilità nella tua base di codice. Ad esempio, se hai una struttura dati complessa con stringhe annidate, un componente [``](/docs/react-native/api/components/t) sarebbe più difficile da usare. ```tsx const gt = useGT(); const data = { title: gt('Hello, world!'), description: gt('This is a description'), }; ``` Consulta la guida [stringhe](/docs/react-native/guides/strings) per saperne di più sull'hook [`useGT`](/docs/react-native/api/strings/use-gt). ## La funzione `msg` La funzione [`msg`](/docs/react-native/api/strings/msg) serve a contrassegnare per la traduzione le stringhe usate in più componenti o archiviate in oggetti di configurazione. Questo è particolarmente utile per contenuti condivisi, come etichette di navigazione, messaggi dei moduli o qualsiasi testo che compare in più punti dell'applicazione. ```tsx // Contrassegna le stringhe per la traduzione import { msg } from 'gt-react-native'; const navItems = [ { label: msg('Home'), href: '/' }, { label: msg('About'), href: '/about' }, { label: msg('Contact'), href: '/contact' } ]; ``` ```tsx // Decodifica e utilizza le stringhe contrassegnate import { useMessages } from 'gt-react-native'; function Navigation() { const m = useMessages(); return ( ); } ``` La funzione [`msg`](/docs/react-native/api/strings/msg) codifica le stringhe con metadati di traduzione e [`useMessages`](/docs/react-native/api/strings/use-messages) le decodifica. Usa [`msg`](/docs/react-native/api/strings/msg) per i contenuti condivisi che devono essere tradotti in modo coerente in tutta l'applicazione. Per i contenuti specifici di un componente, è preferibile [``](/docs/react-native/api/components/t) o [`useGT`](/docs/react-native/api/strings/use-gt). Per saperne di più sulla funzione `msg`, consulta la guida alle [stringhe condivise](/docs/react-native/guides/shared-strings). ## L'hook `useTranslations` L'hook [`useTranslations`](/docs/react-native/api/dictionary/use-translations) è un hook di React che restituisce una funzione utilizzabile per ottenere le traduzioni associate a una determinata chiave. ```tsx title="dictionary.ts" const dictionary = { hello: { world: 'Hello, world!', }, }; ``` ```tsx title="App.tsx" const translate = useTranslations(); translate('hello.world'); ``` Questo comportamento è simile a quello di altre librerie di traduzione, come [`react-i18next`](https://react.i18next.com/) e [`next-intl`](https://next-intl-docs.vercel.app/). Ti sconsigliamo di usare l'hook [`useTranslations`](/docs/react-native/api/dictionary/use-translations) nella tua applicazione. Un uso frequente dell'hook [`useTranslations`](/docs/react-native/api/dictionary/use-translations) renderà la tua base di codice più difficile da mantenere e comporterà un notevole debito tecnico. Ti consigliamo invece di usare il componente [``](/docs/react-native/api/components/t) o l'hook [`useGT`](/docs/react-native/api/strings/use-gt). Se stai migrando da un'altra libreria i18n, l'hook [`useTranslations`](/docs/react-native/api/dictionary/use-translations) è una sostituzione diretta e può essere utile per migrare gradualmente la tua base di codice. Consulta la guida ai [dizionari](/docs/react-native/guides/dictionaries) per saperne di più sull'hook [`useTranslations`](/docs/react-native/api/dictionary/use-translations). Consulta il [riferimento API di useTranslations](/docs/react-native/api/dictionary/use-translations) per ulteriori informazioni. *** ## Passaggi successivi * Scopri come configurare il tuo progetto React Native con l’SDK: [Quickstart](/docs/react-native) * Scopri come tradurre contenuti JSX con il componente [``](/docs/react-native/api/components/t): [Guida alla traduzione di JSX](/docs/react-native/guides/t) * Scopri come tradurre le stringhe con l’hook [`useGT`](/docs/react-native/api/strings/use-gt): [Guida alla traduzione delle stringhe](/docs/react-native/guides/strings) * Scopri come usare le stringhe condivise con la funzione [`msg`](/docs/react-native/api/strings/msg): [Guida alle stringhe condivise](/docs/react-native/guides/shared-strings)