Creazione di un sistema di supporto multilingua in applicazioni native reattive

Creazione di un sistema di supporto multi-language in applicazioni native reatti

React Native, con le sue capacità multipiattaforma, offre diversi approcci robusti per implementare l'internazionalizzazione (i18n) e la localizzazione (l10n), che fornisce una guida approfondita per l'architettura di un sistema di supporto multilingua in React Native, per la copertura di librerie, configurazione, commutazione dinamica, gestione di regole plurali complesse, destra-RT.

Concetti fondamentali di localizzazione

La localizzazione va oltre la semplice traduzione del testo. Si tratta di formattazione numeri, date, valute, gestione della direzione del testo (LTR vs. RTL), pluralizzazione, forme di genere, e anche la regolazione dei layout UI per adattarsi alle stringhe tradotte. Un sistema i18n ben progettato separa il contenuto traslabile dalla base di codice, utilizza riferimenti basati su chiave, e supporta il commutazione di lingua runtime senza richiedere un riavvio dell'app.

Le sfide chiave nel React Native

Scegliere la Biblioteca destra i18n

Mentre esistono diverse librerie, react-i18next] è la scelta più popolare e completo per React Native. Costruito in cima a i18next, fornisce ganci, HOC e componenti per l'integrazione senza soluzione di continuità.

Installazione delle librerie di base

Iniziare installando i pacchetti richiesti:

npm install react-i18next i18next i18next-http-backend react-native-localize

Aggiungi a richiesta i18next-browser-languagedetector[[[]] per il rilevamento automatico della lingua in base alle preferenze del dispositivo.

Impostazione del procedimento

Creare un file di configurazione, ad esempio :

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as RNLocalize from 'react-native-localize';
import en from './translations/en.json';
import es from './translations/es.json';
import fr from './translations/fr.json';

const resources = { en: { translation: en }, es: { translation: es }, fr: { translation: fr } };

const detectionOptions = {
 order: ['localStorage', 'navigator'],
 caches: ['localStorage'],
};

i18n
 .use(initReactI18next)
 .use(require('i18next-browser-languagedetector').default) // for RN, you may replace with custom detector
 .init({
 resources,
 fallbackLng: 'en',
 interpolation: { escapeValue: false },
 detection: {
 // For RN, we'll override detection manually (see below)
 },
 });

// Detect device language at startup
const detectLanguage = () => {
 const locales = RNLocalize.getLocales();
 if (locales && locales.length > 0) {
 const langCode = locales[0].languageCode;
 const supportedLanguages = Object.keys(resources);
 const lang = supportedLanguages.includes(langCode) ? langCode : i18n.options.fallbackLng[0];
 i18n.changeLanguage(lang);
 }
};
detectLanguage();

// Listen to app focus for locale changes
export default i18n;

Utilizzando react-native-localize[[]]] assicura che la tua app rispetti le impostazioni regionali del dispositivo. La funzione [[[]] viene eseguita una volta e imposta la lingua iniziale.

Struttura dei file di traduzione

Organizza le tue traduzioni in file JSON nidificato per lingua e namespace. Esempio per :

{
 "common": {
 "welcome": "Welcome",
 "greeting": "Hello, {{name}}!"
 },
 "home": {
 "title": "Home Screen",
 "description": "This is a multi-language React Native app."
 },
 "errors": {
 "network": "Network error. Please try again."
 }
}

Utilizzando namespaces (ad esempio, , ]) aiuta a gestire grandi applicazioni e consente il carico pigro dei blocchi di traduzione.

Utilizzo di Traduzioni in Componenti

L'usoTraduzione gancio

In qualsiasi componente funzionale:

import { useTranslation } from 'react-i18next';

const MyComponent = () => {
 const { t, i18n } = useTranslation('common');
 return (
 
 {t('welcome')}
 {t('greeting', { name: 'John' })}
  i18n.changeLanguage('es')}>
 Switch to Spanish
 
 
 );
};

La funzione t[]] interpola le variabili e gestisce i plurali. Per cambiare il linguaggio, chiama ], questo innesca un re-render di tutti i componenti abbonati.

Utilizzo del componente Trans

Per stringhe complesse con marcatura incorporata o componenti React:

import { Trans } from 'react-i18next';
// In translations: "welcome_html": "Welcome, {user}!"

 Welcome, {user}!

Gestione delle Plurals, Genere e Contesto

i18next supporta le regole plurali avanzate fuori dalla scatola. Definire le chiavi con [] suffisso o utilizzare contesto. Esempio:

{
 "item": "{{count}} item",
 "item_plural": "{{count}} items",
 "item_other": "{{count}} items"
}

Uso: seleziona automaticamente il modulo corretto in base alla localizzazione. Genere e altri contesti possono essere gestiti tramite l'opzione .

Interruttore dinamico di lingua e persistenza

Per persistere nella preferenza linguistica dell'utente, memorizzare la lingua selezionata in [[]AsyncStorage[] (o [ react-native-mmkv]) e caricarla all'avvio dell'app.

import AsyncStorage from '@react-native-async-storage/async-storage';

const languageDetector = {
 type: 'languageDetector',
 async: true,
 detect: async (callback) => {
 const storedLang = await AsyncStorage.getItem('user-language');
 callback(storedLang || 'en');
 },
 init: () => {},
 cacheUserLanguage: async (lng) => {
 await AsyncStorage.setItem('user-language', lng);
 },
};

i18n.use(initReactI18next).use(languageDetector).init({
 fallbackLng: 'en',
 resources,
 interpolation: { escapeValue: false },
});

Ora, quando l'utente cambia lingua, la preferenza viene salvata e ripristinata automaticamente al prossimo lancio.

Supporto per il supporto (RTL)

React Native supporta RTL tramite il modulo . Quando la lingua è arabo, ebraico o persiano, forza RTL:

import { I18nManager } from 'react-native';

const changeLanguage = async (lng) => {
 await i18n.changeLanguage(lng);
 const isRTL = i18n.dir(lng) === 'rtl';
 I18nManager.forceRTL(isRTL);
 // On Android, you may need to restart the app for full RTL effect
};

Per un'esperienza RTL completa, usare [] e con attenzione. Considerare l'utilizzo di una libreria come react-native-restyle[]] per la direzione a tema.

Caricamento Traduzioni da un server (Over-the-Air)

Per le applicazioni che devono aggiungere lingue senza aggiornamenti di app store, la traduzione di fetch JSONs da un backend. Usa [i18next-http-backend[] con un backend personalizzato per React Native:

import HttpBackend from 'i18next-http-backend';

i18n.use(HttpBackend).init({
 backend: {
 loadPath: 'https://your-api.com/locales/{{lng}}/{{ns}}.json',
 },
 fallbackLng: 'en',
 ns: ['common', 'home'],
 defaultNS: 'common',
});

Inserire le traduzioni in AsyncStorage per evitare ripetute richieste. Combinare con un meccanismo di versioning per scaricare solo i file aggiornati.

Considerazioni sulle prestazioni

Test multi-language Funzionalità

Scrivere test di unità per i file di traduzione: non garantire chiavi mancanti, tutti i segnaposto sono forniti e i plurali funzionano correttamente. Utilizzare [ con un'istanza mock i18n. Per i test di integrazione, simulare gli interruttori di lingua e controllare che i componenti visualizzano il testo corretto.

Migliori Pratiche Ricap

Con librerie come react-i18next[[FLT]]] e react-native-localize, è possibile costruire un sistema robusto che si bilancia con la base utente.