Come l'uso del mobile continua ad esplodere a livello globale, gli utenti si aspettano che le applicazioni si sentano locali, dal testo che leggono ai numeri e alle date di formattazione. React Native, il framework cross-platform sviluppato da Meta, consente agli sviluppatori di costruire app mobili performanti per iOS e Android da un unico codebase.

Localizzazione vs. internazionalizzazione: Definizione dei termini

Prima di immergersi in codice, è importante distinguere tra due concetti correlati. L'internazionalizzazione (i18n)] è il processo di progettazione della vostra applicazione in modo che possa essere adattato a diverse lingue e regioni senza richiedere modifiche di ingegneria.

React Native fornisce solo alcune API di base per il rilevamento locale (ad esempio, dal modulo ), ma la localizzazione completa richiede una libreria dedicata per gestire le risorse di traduzione, il commutazione della lingua e la formattazione. L'ecosistema offre diverse opzioni mature, ognuna con i suoi punti di forza.

Bilancia per la localizzazione dei dati

Tre biblioteche dominano il paesaggio di localizzazione dei nativi React, comprendendo i loro ruoli e il modo in cui si completano è il primo passo verso una solida implementazione.

reagire-i18next

Costruita in cima a i18next[]], una delle più popolari strutture di internazionalizzazione per JavaScript, ] è una soluzione completa per la gestione della traduzione. Fornisce ganci di correzione (), Componenti di alto ordine e un componente di rilevamento di traduzione che automaticamente ri-render quando il linguaggio cambia.

I vantaggi principali di reagire-i18next includono il suo ecosistema ricco di plugin e la capacità di caricare le traduzioni su richiesta (splitting loro per percorso o funzione). Funziona anche senza soluzione di continuità con il rendering lato server e può essere utilizzato in parti non reatti del vostro Android o codice nativo iOS tramite il motore sottostante i18next.

reagire-nativo-localizza

Mentre reagisce-i18next gestisce la logica di traduzione, [] si occupa di informazioni locali sul lato dispositivo. Espongono l'attuale zona locale, la zona temporale, l'unità di temperatura, il sistema di misura e il tipo di calendario. Questi valori sono critici per la formattazione di numeri, date e valute correttamente.

È possibile combinare reagisci-native-localizzare con reagire-i18next alimentando la lingua rilevata nell'inizializzazione i18next. Questo ti dà un'esperienza senza soluzione di continuità, orientata al dispositivo: quando l'utente cambia la lingua del telefono, l'applicazione passa automaticamente alla traduzione corrispondente.

I18n‐js

Per progetti o sviluppatori più piccoli che preferiscono un approccio leggero, ] offre un'API minimalista. Fornisce semplici ricerche di traduzione, regole di pluralizzazione e formattazione data/numero. Tuttavia, manca il rilevamento di lingua incorporata e non si integra con il ciclo di vita dei componenti React. Molte squadre lo utilizzano come modulo di utilità per traduzioni non-UI (ad esempio, nei riduttori Redux o nei supporti API) mentre si affidano.

Un'alternativa emergente è , che è inclusa nell'ecosistema Expo, che rispecchia le capacità di reagire-native-localizzare ma è adatta per i flussi di lavoro gestiti da Expo. Se si sta costruendo con Expo, è spesso il modo più semplice per ottenere i dati locali.

Costruire un'App multilingue: Attuazione passo passo passo passo passo

Passiamo attraverso il processo di aggiunta della localizzazione ad un nuovo progetto React Native utilizzando lo stack più comune: reagisci a‐i18next per le traduzioni e reagisci-native-localizza per il rilevamento delle impostazioni del dispositivo.

1. Installare dipendenze

Eseguire il seguente comando per aggiungere sia librerie che loro pari:

npm install react-i18next i18next react-native-localize

Se si utilizza Expo, installare ] invece di e aggiungere i pacchetti e .

2. Configurare i18next

Creare un file (o [] per TypeScript) nella radice del progetto. Questo file istituirà l'istanza i18next, importare risorse di traduzione e integrare il rivelatore locale.

Di seguito è riportata una configurazione tipica:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { getLocales } from 'react-native-localize';

import en from './locales/en.json';
import es from './locales/es.json';
import fr from './locales/fr.json';
import de from './locales/de.json';

// Detect device language
const languageDetector = {
 type: 'languageDetector',
 async: false,
 detect: () => {
 const locales = getLocales();
 return locales[0]?.languageCode ?? 'en';
 },
 init: () => {},
 cacheUserLanguage: () => {},
};

i18n
 .use(languageDetector)
 .use(initReactI18next)
 .init({
 resources: {
 en: { translation: en },
 es: { translation: es },
 fr: { translation: fr },
 de: { translation: de },
 },
 fallbackLng: 'en',
 interpolation: {
 escapeValue: false, // React already safes from XSS
 },
 });

export default i18n;

Questa configurazione utilizza la reazione-native-localize per recuperare la lingua del dispositivo primario. La lingua di inconveniente assicura che le traduzioni mancanti non rompono l'interfaccia utente.

3. Creare File di traduzione JSON

All'interno di una cartella , creare file JSON separati per ogni lingua supportata.

{
 "welcome": "Welcome",
 "greeting": "Hello, {{name}}!",
 "notifications": {
 "new_message": "You have {{count}} new message",
 "new_message_plural": "You have {{count}} new messages"
 }
}

{
 "welcome": "Bienvenido",
 "greeting": "¡Hola, {{name}}!",
 "notifications": {
 "new_message": "Tienes {{count}} mensaje nuevo",
 "new_message_plural": "Tienes {{count}} mensajes nuevos"
 }
}

Notare il suffisso —i18next gestisce automaticamente i moduli plurali basati sul conteggio fornito quando si chiama la funzione di traduzione.

4. Avvolgere l'applicazione con un i18next Provider

Nella vostra componente radice (ad esempio, ), importare la configurazione i18n e avvolgere tutto con [ (opzionale ma consigliato per la provabilità). Nella maggior parte dei casi, semplicemente importare è sufficiente perché lo registra con il contesto di React.

import React from 'react';
import { SafeAreaView } from 'react-native';
import './i18n'; // Ensure i18n is initialized before any component
import MainScreen from './screens/MainScreen';

const App = () => (
 <SafeAreaView style={{ flex: 1 }}>
 <MainScreen />
 </SafeAreaView>
);

export default App;

5. Utilizzare traduzioni componenti interni

All'interno di qualsiasi componente funzionale, utilizzare il gancio per accedere alla funzione :

import React from 'react';
import { View, Text, Button } from 'react-native';
import { useTranslation } from 'react-i18next';

const MainScreen = () => {
 const { t, i18n } = useTranslation();

 const changeLanguage = (lng) => {
 i18n.changeLanguage(lng);
 };

 return (
 <View>
 <Text>{t('welcome')}</Text>
 <Text>{t('greeting', { name: 'Maria' })}</Text>
 <Button title="Español" onPress={() => changeLanguage('es')} />
 <Button title="Français" onPress={() => changeLanguage('fr')} />
 </View>
 );
};

export default MainScreen;

La funzione rivaluta automaticamente quando il linguaggio cambia, e il componente ri-ri-renders grazie all'integrazione del contesto React.

Caratteristiche di localizzazione avanzate

Oltre alla traduzione semplice, le app di produzione richiedono supporto per la pluralizzazione, la formattazione della data/numero e l'adattamento del layout di destra a sinistra (RTL).

Pluralizzazione e contesto

I18next utilizza il formato del messaggio ICU per gestire le regole plurali. L'esempio sopra con e ] dimostra il caso più semplice. Per le lingue con regole plurali più complesse (ad esempio, arabo, russo), è possibile fornire forme aggiuntive come , , o utilizzare la variabile .

// Example for Russian
{
 "unread_messages": "{{count}} непрочитанное сообщение",
 "unread_messages_few": "{{count}} непрочитанных сообщения",
 "unread_messages_many": "{{count}} непрочитанных сообщений"
}

Per formattare le date e i numeri, è possibile utilizzare l'API (disponibile nei moderni motori JavaScript) o affidarsi a una libreria come [Luxon[]]] o ] date‐fns.

Supporto per layout destro a braccio (RTL)

React Native ha il supporto integrato per le lingue RTL come arabo ed ebraico. Abilita esso impostando il e nel file root, in base alla lingua corrente. Quando l'utente passa a un locale RTL, tutte le direzioni flexbox automaticamente capovolgere. Tuttavia, è necessario assicurarsi che i vostri stili utilizzino proprietà logiche (ad esempio, 

import { I18nManager } from 'react-native';

// Inside your language switch handler:
if (newLanguage === 'ar') {
 I18nManager.forceRTL(true);
} else {
 I18nManager.forceRTL(false);
}

Essere consapevoli che il gioco RTL richiede un riavvio completo app su alcune versioni Android. È possibile avvertire l'utente o implementare un riavvio utilizzando .

Migliori Pratiche per la localizzazione Produttiva

Ottenere le basi di lavoro è una cosa; costruire un sistema di localizzazione manutenbile e scalabile è un'altra. Le seguenti best practice vi salveranno il tempo e prevenire bug frustranti.

Organizzare i file di traduzione per caratteristica

Le grandi applicazioni dovrebbero evitare un singolo file JSON monolitico per lingua. Invece, utilizzare la funzione namespace di i18next per dividere le traduzioni per funzione o schermo. Ad esempio, [, ]. Questo mantiene i file piccoli e rende più facile la fusione delle richieste pull.

Fornisci sempre una lingua di ritorno

Definire una lingua di fallback (solitamente inglese) che contiene ogni chiave utilizzata nell'app. Se una chiave non esiste nella lingua dell'utente, i18next visualizzerà il valore di fallback, questo è particolarmente importante durante lo sviluppo precoce quando non tutte le traduzioni sono complete.

Utilizzare una convenzione di denominazione chiave

Le convenzioni comuni includono l'utilizzo di notazione dei punti (], []) o la mimitura della gerarchia dei componenti ([]). Le chiavi dovrebbero essere descrittive abbastanza da poter individuare rapidamente il loro utilizzo.

Traduzioni di testo separate dal contenuto

Non tutto ciò che appare nell'interfaccia utente è una stringa statica. I contenuti generati dall'utente, i nomi dei prodotti o i dati dinamici non devono essere passati attraverso la funzione [] – hanno bisogno della propria logica di archiviazione e formattazione.

Automatizzare i flussi di lavoro di traduzione

Per i team con traduttori professionisti, si consideri l'integrazione con un sistema di gestione delle traduzioni (TMS) come Lokalise, Crowdin o Phrase. Queste piattaforme si collegano al repository di codici, spingono stringhe di sorgente aggiornate e tirano indietro i file tradotti.

Testare le app localizzate

Testare applicazioni multilingue richiede più di controllare che il testo cambi. È necessario verificare che tutti gli elementi si regolano correttamente, che i layout non si rompono, e che la formattazione dei dati corrisponde alla localizzazione dell'utente.

Simulare Locali diversi sui Simulatori

Per iOS, è possibile modificare la lingua nelle opzioni Run dello schema; per Android, è possibile creare un nuovo emulatore con un locale personalizzato. Testare ogni lingua supportata su entrambe le piattaforme per scoprire le quirk specifiche della piattaforma (ad esempio, i raccoglitori di data potrebbero non rispettare la tua lingua scelta nelle versioni Android più vecchie).

Controllo di traduzione di prova unità

Scrivere test di unità per la configurazione i18n per garantire che tutte le chiavi si risolvano correttamente per le lingue di base e di fallback. Utilizzare un framework di prova come Jest per caricare la configurazione e chiamare per ogni lingua.

import i18n from '../i18n';

test('all translation keys exist in English', () => {
 const keys = ['welcome', 'greeting', 'notifications.new_message'];
 keys.forEach(key => {
 expect(i18n.t(key)).not.toBe(key);
 });
});

Test di regressione visiva

Le stringhe di testo lunghe in lingue come il tedesco o il finlandese possono causare il sovraflusso del layout. Utilizzare i test istantanei (ad esempio, le snapshot Jest con diverse configurazioni locali) o gli strumenti di regressione visiva dedicati come Percy per catturare la rottura dell'interfaccia utente.

Considerazioni sulle prestazioni

La localizzazione non deve compromettere le prestazioni dell'app. Ecco alcuni consigli per mantenere la tua app incauta.

  • Traduzioni di carico pigramente:[]] Usare l'opzione [] o le importazioni dinamiche per recuperare i file di lingua solo quando necessario.
  • Avoid re-registering delle risorse:[ Inizializza il tuo caso i18n una volta all'avvio dell'app.
  • Memoize formattato valori:[] Se si esegue la data costosa o la formattazione del numero all'interno di un loop di rendering, avvolgere il risultato in [] per evitare ricalcoli su ogni ri-render.
  • Consider utilizzando una cache di traduzione:[ Per le applicazioni che permettono di cambiare lingua offline, memorizzare le traduzioni in AsyncStorage o un database locale simile.

Conclusioni

Creare un'app React Native multilingue richiede più di una semplice stringa di scambio. Richiede un'architettura premurosa che gestisce il rilevamento locale del dispositivo, la gestione della traduzione, la pluralizzazione, la formattazione del numero/data e il layout RTL. Scegliendo una libreria robusta come reagire-i18next abbinata a react-native-localize, è possibile creare un'esperienza che si sente nativo per gli utenti in ogni angolo del mondo.

Ricordate che la localizzazione è un processo continuo: le traduzioni hanno bisogno di aggiornamenti, si possono aggiungere nuove lingue e le sfumature culturali devono essere rispettate. Investi in tooling anticipatamente, stabilisci flussi di lavoro chiari con il vostro team di traduzione e prova in modo inesauribile. Lo sforzo paga in soddisfazione dell'utente, una maggiore ritenzione e una maggiore portata del mercato.

Per ulteriori informazioni, consultare la documentazione ufficiale di react‐i18next e react‐native‐localize. Si potrebbe anche trovare il i18next plugin list] utile per estendere la funzionalità.