Crearea unui sistem de suport multi-lingvistic în aplicații native de reacție

Construirea de aplicații mobile care susțin mai multe limbi nu mai este o cerință pentru orice aplicație care vizează adoptarea globală. Reacționați Nativ, cu capacitățile sale de platformă transversală, oferă mai multe abordări robuste pentru implementarea internaționalizării (i18n) și localizare (l10n). Acest articol oferă un ghid aprofundat pentru a proiecta un sistem de suport multi-limbă în React Native, acoperind biblioteci, configurare, comutare dinamică, manipularea complexe plural reguli, ajustări de la dreapta la stânga (RTL) și bune practici de performanță.

Concepte fundamentale de localizare

Localizarea merge dincolo de traducerea simplă a textului. Aceasta implică formatarea numerelor, date, valute, manipularea directiei textului (LTR vs. RTL), pluralizarea, formele de gen, și chiar ajustarea formatelor UI pentru a se potrivi siruri de caractere traduse. Un sistem i18n bine proiectat separă conținutul traducabil de baza de coduri, folosește referințe bazate pe taste, și suportă trecerea limbajului runtime fără a necesita o repornire aplicație.

Principalele provocări în materie de reacție nativă

  • Module native pentru detectarea localizării dispozitivului (diferențe între iOS și Android).
  • Încărcare eficientă și cache fișiere de traducere.
  • Gestionarea stării limbajului activ pe întreaga aplicație (inclusiv navigarea și preferințele persistente).
  • Manipularea de schițe RTL
  • Testarea și verificarea tuturor sirurilor de caractere traduse în context.

Alegerea dreapta i18n bibliotecă

În timp ce mai multe biblioteci există, react-i18next este cea mai populară și completă alegere pentru React Native. ]i18next, oferă cârlige, HOC și componente pentru integrare fără sudură. Alternative includ i18n-js (simplu, dar mai puțin puternic) și ]react-native-localize (pentru detectarea locală, nu traducere). Pentru aplicații de întreprindere, react-i18next cu plugin-uri suplimentare (de exemplu, i18n-browser-locator-limbăr adaptat pentru Reactiv) este recomandat.

Instalarea bibliotecilor centrale

Începe prin instalarea pachetelor necesare:

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

Se adaugă opțional i18next-browser-languagedetector pentru detectarea automată a limbajului pe baza preferințelor dispozitivului. Rețineți că este posibil să fie necesar să conectați modulele native pentru localizarea reactivă-nativ (conectare automată în RN 0,60+).

Înființarea Tribunalului i18

Creați un fișier de configurare, de exemplu, :

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;

Folosind react-native-localizing] asigură că aplicația respectă setările regionale ale dispozitivului. Funcția rulează o dată și stabilește limba inițială. Pentru actualizările continue (dacă utilizatorul își schimbă limbajul dispozitivului în timp ce aplicația este deschisă), vă puteți abona la modificări.

Structura fișierelor de traducere

Organizaţi-vă traducerile în fişiere JSON în cuib după limbă şi spaţii de nume. Exemplu pentru :

{
 "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."
 }
}

Folosind namespace (de exemplu, , ) ajută la gestionarea aplicațiilor mari și permite încărcarea leneșă a bucăților de traducere.

Folosind traduceri în componente

Cârligul de traducere

În orice componentă funcțională:

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
 
 
 );
};

Funcţia t interpolează variabilele şi se ocupă de plurali. Pentru a schimba limba, apel ] aceasta declanşează o re-remitere a tuturor componentelor subscrise.

Utilizarea componentei Trans

Pentru siruri complexe cu componente de marcare sau de reacție încorporate:

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

 Welcome, {user}!

Manipularea picturilor, a genului şi a contextului

i18n următorul sprijină reguli avansate plural din cutie. Defineţi tastele cu sufix sau de a folosi context. Exemplu:

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

Utilizare: ] selectează automat forma corectă bazată pe localizare. Sexul și alte contexte pot fi tratate prin opțiunea .

Schimbarea şi perseverenţa dinamică a limbajului

Pentru a persista preferinţa limbajului utilizatorului, păstraţi limba selectată în AsincStorage [sau react-native-mmkv] şi încărcaţi-o la pornirea aplicaţiei.

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

Acum, când utilizatorul schimbă limba, preferinţa este salvată şi restaurată automat la următoarea lansare.

Suport de dreapta-la-stânga (RTL)

Reacţionează Native suportă RTL prin modulul . Când limba este arabă, ebraică, sau persană, forţa 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
};

Pentru o experiență completă a RTL, utilizați și cu atenție. Gândiți-vă la utilizarea unei biblioteci precum ]react-native-restil] pentru direcția bazată pe temă.

Încărcare traduceri de la un server (peste-aer)

Pentru aplicații care trebuie să adauge limbi fără actualizări ale magazinului de aplicații, adu traducerea JSON de pe un suport. Utilizați i18next-http-backend cu un suport personalizat pentru 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',
});

Cache traducerile aduse în AsyncStorage pentru a evita cereri repetate. Combinați cu un mecanism de versiune pentru a descărca doar fișiere actualizate.

Considerații privind performanța

  • Folosiţi divizarea namespace: Numai traducerile de sarcină pentru ecranul curent.Încarcarea leneşă reduce dimensiunea iniţială a pachetului.
  • Evitați re-re-renders: Cârlig deja optimizat prin subscrierea numai la modificări lingvistice. Înfășoară componente scumpe cu .
  • În timpul construcției, transformați JSON în format minifile.
  • Pentru aplicații mari, ia în considerare utilizarea i18next-scanner pentru a extrage automat chei de traducere din baza de cod.

Testarea funcționalității multi-lingvurilor

Scrieți teste de unitate pentru fișierele de traducere: asigurați-vă că nu lipsesc chei, toți deținătorii de locuri sunt furnizate, și pluralii funcționează corect. Utilizați cu o instanță i18n machetă. Pentru teste de integrare, simulați comutatoare lingvistice și verificați dacă componentele afișează text corect. De asemenea, testați redarea aspectului RTL pe ambele platforme.

Cele mai bune practici recapitulează

  • Folosiți întotdeauna tastele de traducere]niciodată șiruri de caractere cu care se confruntă utilizatorul cu coduri hardcode.
  • Continuați traducerile organizate prin funcție sau ecran (namespaces).
  • Folosiţi limbile de rezervă pentru a preveni ruperea traducerilor incomplete.
  • Test pe dispozitive reale cu diferite setări locale.
  • Consideră diferențele culturale dincolo de limbă: formate de date, semnificații de culoare, imagini.
  • Documentează fluxul de lucru i18n pentru traducători și dezvoltatori.

Implementarea suportului multi-limbă în React Native este o investiţie plină de satisfacţii. Cu biblioteci cum ar fi react-i18next şi react-nativ-localize, puteţi construi un sistem robust care să cânte cu baza de utilizator. Pentru lectură ulterioară, consultaţi oficial react-i18next documentation, i18next core guide] şi [[FLT:]]react-native-localizeaza depozit [. Începeţi, iteraţi, şi aplicaţia dumneavoastră va vorbi limba utilizatorului.