Opprette et flerspråklig støttesystem i React Native Apps

Bygge mobilapplikasjoner som støtter flere språk er ikke lenger valgfri ⁇ det er et krav for alle apper som tar sikte på global adopsjon. React Native, med sine tverrplattformsfunksjoner, tilbyr flere robuste tilnærminger til å implementere internasjonalisering (i18n) og lokalisering (l10n). Denne artikkelen gir en grundig guide til å arkitektere et flerspråklig støttesystem i React Native, dekker biblioteker, konfigurasjon, dynamisk bytte, håndtering komplekse flertallsregler, høyre-til-venstre (RDL) layout justeringer og ytelse beste praksis.

Kjernekonsepter om lokalisering

Lokalisering går utover enkel tekstoversettelse. Det innebærer formateringsnumre, datoer, valutaer, håndtering av tekstretning (LTR vs RTL), flerspråkliggjøring, kjønnsformer og til og med justering av UI-oppsett for å passe oversatte strenger. Et veldesignet i18n-system skiller translaterbart innhold fra kodebasen din, bruker nøkkelbaserte referanser, og støtter kjøretid språkbryter uten å kreve omstart av en app.

Viktige utfordringer i React Native

  • Native moduler for enhetslokalisering (forskjellige mellom iOS og Android).
  • Effektivt lasting og caching oversettelsesfiler.
  • Manageing state for det aktive språket på tvers av hele appen (inkludert navigasjon og vedvarende preferanser).
  • Håndtering av RTL-layouter ⁇ React Native supports ], men krever nøye justering.
  • Testing og verifisering av alle oversatte strenger i sammenheng.

Velge det riktige i18n-biblioteket

Mens det finnes flere biblioteker, er react-i18next det mest populære og funksjonsfullstendige valget for React Native. Bygget på toppen av ]]i18next], det gir kroker, HOCs og komponenter for sømløs integrasjon. Alternativer inkluderer ]i18n-js (simpelt, men mindre kraftig) og [FLT:]]react-native-localize ] (for lokal deteksjon, ikke oversettelse). For bedriftsapper, reager-i18next med ekstra plugins (f.eks. i18next-browser-languagedetektor) anbefales.

Installere kjernebibliotekene

Begynn med å installere de nødvendige pakkene:

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

Legg til i18next-browserspråkdetektor for automatisk språkdeteksjon basert på enhetsinnstillinger. Merk at du kan måtte koble innfødte moduler for reakt-native-localize (auto-linking i RN 0.60+).

Oppstilling av i18n-instansen

Opprette en konfigurasjonsfil, f.eks. :

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;

Bruker react-native-localize sikrer appen din respekterer enhetens regionale innstillinger. funksjonen kjører en gang og setter det opprinnelige språket. For kontinuerlige oppdateringer (hvis brukeren endrer enhetsspråket mens appen er åpen), kan du abonnere på endringer.

Oversettelsesfiler Struktur

Organiser oversettelsene dine i hekkede JSON-filer etter språk og navneområder. Eksempel på :

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

Ved å bruke navneplasser (f.eks. , hjelper å administrere store apper og muliggjør doven lasting av oversettelsesbiter.

Bruke oversettelser i komponenter

Brukstranslasjon krog

I enhver funksjonell komponent:

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

]t fungerer interpolerer variabler og håndterer plural. For å endre språk, ring ⁇ dette utløser en re-render av alle abonnentkomponenter.

Bruke Trans-komponenten

For komplekse strenger med innebygde merke- eller reaktkomponenter:

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

 Welcome, {user}!

Håndtering av flerspråklige, kjønnslige og kontekst

i18next støtter avanserte flertallsregler ut av boksen. Definer taster med suffiks eller bruk kontekst. Eksempel:

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

Bruk: velger automatisk riktig skjema basert på lokal. Kjønn og andre sammenhenger kan håndteres via -alternativet.

Dynamisk språkveksling og varighet

For å fortsette brukerens språkpreferanse lagrer du det valgte språket i AsyncStorage (eller ]react-native-mmkv]) og laster det på oppstart av appen. Endre i18n-konfigurasjonen:

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

Nå når brukeren bytter språk, lagres preferansen og gjenopprettes automatisk ved neste oppstart.

Høyre til venstre (RDL) støtte

React Native støtter RTL via modulen . Når språket er arabisk, hebraisk eller persisk, tvinger 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
};

For en fullstendig RTL-opplevelse, bruk og nøye. Vurder å bruke et bibliotek som react-native-restyle for temabasert retning.

Laster inn oversettelser fra en server (Over-the-Air)

For apper som trenger å legge til språk uten oppdateringer for applagring, henter JSONs fra en backend. Bruk i18next-http-backend med en egendefinert backend for 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 de hentede oversettelsene i SyncStorage for å unngå gjentatte forespørsler. Kombiner med en versjonsmekanisme for å bare laste ned oppdaterte filer.

Performance vurderinger

  • Bruk navneområdedeling: Bare last oversettelser for gjeldende skjerm. Lazy lasting reduserer den opprinnelige pakkestørrelsen.
  • Avoid re-renders: ] kroken allerede optimaliserer ved å abonnere på bare språkendringer. Wrap dyre komponenter med ].
  • : Under bygging forvandler JSON til minified format.
  • For store apper, vurdere å bruke i18next-scanner for å automatisk trekke ut oversettelsesnøkler fra kodebasen din.

Testing av flerspråklig funksjonalitet

Skriv enhetstester for oversettelsesfilene dine: sikre at det ikke mangler nøkler, alle plassholdere er gitt, og plurals fungerer riktig. Bruk med et spott i18n eksempel. For integrasjonstester, simuler språkbrytere og sjekk at komponenter viser riktig tekst. Også test TTL layout gjengivelse på begge plattformene.

Beste praksis Recap

  • Bruk alltid oversettelsesnøkler ⁇ aldri hardcode-bruker-vendende strenger.
  • Hold oversettelser organisert etter funksjon eller skjerm (navnerom).
  • Bruk reservespråk for å hindre ufullstendige oversettelser fra å bryte UI.
  • Test på ekte enheter med forskjellige innstillinger for lokalisering.
  • Konsider kulturelle forskjeller utover språk: datoformater, fargebetydninger, bilder.
  • Dokumenter i18n arbeidsflyten for oversettere og utviklere.

Implementere flerspråklig støtte i React Native er en givende investering. Med biblioteker som ] react-i18next og ]react-native-localize], kan du bygge et robust system som skalerer med brukerbasen din. For videre lesing, referere til den offisielle ]react-i18next dokumentasjon, ]i18next kjerneguiden, og ]react-native-localize-arkiv]. Start liten, iterate, og din app vil snakke brukerens språk ⁇ literalt.