Skapa ett flerspråkigt stödsystem i Reagera inhemska appar

Att bygga mobila applikationer som stöder flera språk är inte längre valfritt - det är ett krav på någon app som syftar till global adoption. React Native, med sin plattformsfunktion, erbjuder flera robusta metoder för att genomföra internationalisering (i18n) och lokalisering (l10n). Denna artikel ger en djupgående guide till att arkitektera ett multispråkigt stödsystem i React Native, som täcker bibliotek, konfiguration, dynamisk växling, hantera komplexa plurala regler, höger-till-vänster (RTL) layoutjusteringar och bästa praxis.

Kärnkoncept för lokalisering

Lokalisering går utöver enkel textöversättning. Det handlar om formatering av siffror, datum, valutor, hantering av textriktning (LTR vs RTL), pluralisering, könsformer och till och med justering av UI-layouter för att passa översatta strängar. Ett väldesignat i18n-system skiljer översättbart innehåll från din codebase, använder nyckelbaserade referenser och stöder runtime språkbyte utan att kräva en appstart.

Viktiga utmaningar i React Native

  • Native moduler för enhetslokal detektering (skillnader mellan iOS och Android).
  • Effektivt ladda och cacha översättningsfiler.
  • Hantera tillstånd för det aktiva språket i hela appen (inklusive navigering och bestående preferenser).
  • Hantering av RTL-layouter - Reagera Native stöder men kräver noggrann anpassning.
  • Testa och verifiera alla översatta strängar i sammanhanget.

Välj rätt i18n bibliotek

Medan flera bibliotek finns, react-i18next är det mest populära och funktionsfulla valet för React Native. Byggd ovanpå ] i18next ], det ger krokar, HOCs och komponenter för sömlös integration. Alternativ inkluderar i18n-js (enkel, men mindre kraftfull) och [LTrow:6:

Installera kärnbibliotek

Börja med att installera de paket som krävs:

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

Alternativt lägga till i18next-browser-languagedetector för automatisk språkdetektering baserat på enhetspreferenser. Observera att du kan behöva länka infödda moduler för react-native-localize (auto-linking i RN 0.60+).

Ställ in i18n Instance

Skapa en konfigurationsfil, t.ex. :

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;

Använda ] react-native-localize ]] säkerställer att din app respekterar enhetens regionala inställningar. Funktionen ] körs en gång och sätter det ursprungliga språket. För kontinuerliga uppdateringar (om användaren ändrar sitt enhetsspråk medan appen är öppen), kan du prenumerera på ändringar.

Översättningsfiler struktur

Organisera dina översättningar i nästlade JSON-filer med språk och namnrymder. Exempel 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."
 }
}

Använda namnrymder (t.ex. ]], ]) hjälper till att hantera stora appar och möjliggör lat lastning av översättningskunkar.

Använda översättningar i komponenter

Användningen Translation hook

I alla funktionella komponenter:

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

]][]]] funktionen interpolerar variabler och hanterar plurals. För att ändra språk, ring ] - detta utlöser en återgivning av alla prenumererade komponenter.

Använda Trans-komponenten

För komplexa strängar med inbäddad markering eller Reagera komponenter:

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

 Welcome, {user}!

Hantera Plurals, Gender och Context

i18next stöder avancerade pluralregler ur lådan. Definiera nycklar med ]] suffix eller använd ]]]] sammanhang. Exempel:

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

Användning: ] väljer automatiskt rätt formulär baserat på lokalen. Kön och andra sammanhang kan hanteras via ] alternativet.

Dynamisk språkbyte och uthållighet

För att kvarstå användarens språkpreferens, lagra det valda språket i ]AsyncStorage ] (eller ]] react-native-mmkv]]) och ladda det på appstart. Ändra i18n konfiguration:

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är användaren byter språk sparas preferensen och återställs automatiskt vid nästa lansering.

höger-till-vänster (RTL) Support

React Native stöder RTL via ]]-modulen. När språket är arabiskt, hebreiskt eller persiskt, tvinga 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
};

För en komplett RTL-upplevelse, använd ] och noggrant. Överväg att använda ett bibliotek som ]] react-native-restyle ] för temabaserad riktning.

Ladda översättningar från en server (Över-the-Air)

För appar som behöver lägga till språk utan app store uppdateringar, hämta översättning JSONs från en backend. Använd ] i18next-http-backend ] med en anpassad backend för 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 hämtade översättningarna i AsyncStorage för att undvika upprepade förfrågningar. Kombinera med en versionsmekanism för att bara ladda ner uppdaterade filer.

Prestanda överväganden

  • ] Använda namnrymdens splittring: Endast lastöversättningar för den aktuella skärmen. Lazy-belastningen minskar den ursprungliga buntstorleken.
  • ] Återgivning : ]-kroken optimerar redan genom att endast prenumerera på språkförändringar. Släpp dyrbara komponenter med ].
  • ] Översättningsfiler : Under byggandet, omvandla JSON till minifierad format.
  • ] För stora appar[], överväga att använda ] i18next-scanner[] för att automatiskt extrahera översättningsnycklar från din kodbas.

Testa multi-språk funktionalitet

Skriv enhetstest för dina översättningsfiler: se till att inga saknade nycklar, alla platshållare tillhandahålls och plurals fungerar korrekt. Använd ] med en mock i18n instans. För integrationstest, simulera språkbrytare och kontrollera att komponenterna visar korrekt text. Testa också RTL-layout rendering på båda plattformarna.

Bästa praxis Recap

  • Använd alltid översättningsnycklar —aldrig hårdkodsanvändarläge.
  • ]] Behåll översättningar som organiserats genom funktion eller skärm (namnrymder).
  • ] Använda återfallsspråk för att förhindra att ofullständiga översättningar bryter UI.
  • ] Testa på riktiga enheter med olika lokalinställningar.
  • ] Tänk på kulturella skillnader] bortom språket: datumformat, färgsyften, bilder.
  • dokumentera ditt i18n-arbetsflöde för översättare och utvecklare.

Implementering av multi-language stöd i React Native är en givande investering. Med bibliotek som ] react-i18next och ] react-native-localize ], kan du bygga ett robust system som skalar med din användarbas. För vidare läsning, hänvisa till den officiella react-i18next dokumentation ,