Monikielisen tukijärjestelmän luominen React native -tutkimuksessa Sovellukset

Ydinkirjastojen asentaminen

Aloita asentamalla vaaditut paketit:

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

Valinnaisesti lisätään i18seuraava-selain-kielidetector[ automaattiseen kielentunnistus perustuu laiteasetuksiin. Huomaa, että saatat tarvita linkkiä natiivimodulit reaction-native-localize (auto-linking RN 0.60+).

I18n-oikeusasteen perustaminen

Luo asetustiedosto, esim. :

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;

reaction-native-localize[] varmistaa, että sovelluksesi noudattaa laitetta. [ toiminto toimii kerran ja asettaa alkukielen. Jatkuvaa päivitystä varten (jos käyttäjä muuttaa laitteen kieltä sovelluksen ollessa auki), voit tilata muutoksia.

Käännöstiedostojen rakenne

Järjestä käännökset pesityissä JSON-tiedostoissa kielen ja nimiavaruuden mukaan. Esimerkki :

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

Nimitilojen (esim. , ) käyttö auttaa hallitsemaan suuria sovelluksia ja mahdollistaa laiskan käännösosien lataamisen.

Kääntäminen komponentteina

Kääntökoukku

Kaikissa toiminnallisissa komponenteissa:

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[ -toiminto interpoloi muuttujat ja käsittelee monikoita. Voit muuttaa kieltä soittamalla .

Transkomponentin käyttö

Monimutkaiset merkkijonot, joissa on upotettu merkintä tai React-komponentti:

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

 Welcome, {user}!

Monikoiden, sukupuoli- ja kontekstien käsittely

i18next tukee edistyneitä monikon sääntöjä laatikon ulkopuolella. Määrittele avaimet loppuliitteellä tai käytä kontekstia. Esimerkki:

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

Käyttö: valitsee automaattisesti oikean lomakkeen paikallisen perusteella. Sukupuoli ja muut kontekstit voidaan käsitellä -valinnan kautta.

Dynaaminen kielenvaihto ja pysyvyys

Käyttäjän kielen suosion säilyttämiseksi tallenna valittu kieli [AsyncStorage (tai [reaction-native-mmkv)) ja lataa se sovelluksen käynnistyessä. Muokkaa i18n-konfiguraatiota:

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

Nyt kun käyttäjä vaihtaa kieltä, valinta tallennetaan ja palautetaan automaattisesti seuraavan käynnistämisen yhteydessä.

Oikean ja vasemman puolen tuki (RTL)

React Native tukee RTL kautta moduuli. Kun kieli on arabia, heprea, tai persia, voima 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
};

Täydellinen RTL-kokemus: Käytä ja huolellisesti. Harkitse ] -reagoi-native-restyle -kirjaston käyttöä teemakohtaisessa suunnassa.

Ladataan käännöksiä Palvelimesta (Over-the- Air)

Sovelluksille, joiden on lisättävä kieliä ilman sovellustallennuspäivityksiä, hae käännös JSONs taustaosasta. Käytä [i18next-http-backend] -ohjelmaa mukautetulla taustaosalla 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',
});

Välimuisti noudetut käännökset AsyncStorage-palvelussa toistuvien pyyntöjen välttämiseksi. Yhdistä versiomekanismiin ladataksesi vain päivitettyjä tiedostoja.

Suorituskyvyn huomioon ottaminen

• Käytä nimiavaruusjakoa[: Laiska lataus vähentää alkuperäistä nippukokoa.
• ] Vältä uudelleenresoreja[]: Koukku on jo optimoitu tilaamalla vain kielen muutoksia. Kääri kalliit komponentit .
• Esikoita käännöstiedostoja[: Rakentamisen aikana muuttaa JSON kaivostettuun muotoon.
• ]Suurien sovellusten osalta harkitse ]i18seuraavan skannerin käyttöä automaattisesti käännösavaimien poimimiseksi koodipohjastasi.

Monikielisyystestaus

Kirjoita käännöstiedostojen yksikkötestit: varmista, ettei puuttuvia avaimia ole, kaikki paikanhaltijat on toimitettu ja monikot toimivat oikein. Käytä propace i18-esimerkkiä. Integrointitesteissä simuloidaksesi kielivalitsimet ja tarkistaaksesi, että komponentit näyttävät oikean tekstin. Testaa myös RTL-asettelun renderöinti molemmilla alustoilla.

Parhaat käytännöt: yhteenveto

• Älä aina käytä käännösavaimia[]] koskaan kovakoodeja käyttäjää kohti suunnattuja merkkijonoja.
• Pidä käännökset järjestetty[ ominaisuus tai näyttö (nimiavaruudet).
• Käytä varakieliä[ estämään epätäydelliset käännökset rikkomasta käyttöliittymää.
• Testaa oikeilla laitteilla eri paikallisasetuksissa.
• Myös kulttuurierot [ kielen ulkopuolella: päivämäärämuodot, värimerkitykset, kuvat.
• Dokumentoida i18n työnkulku[ kääntäjille ja kehittäjille.

Monikielinen tuki React Nativessa on palkitseva sijoitus. Kirjastoissa kuten reaction-i18next[ ja [reaction-native-localize[[], voit rakentaa vankan järjestelmän, joka on käyttäjäpohjasi kanssa. Lisätietoja saat osoitteesta: virallinen [ reaction-i18next documentation[], [], i18next core guide[[]], ja [[reative-native-localized arkisto[. Käynnistä pieni, iterate, ja sovelluksesi puhuu käyttäjän kieltä.