Több nyelven beszélő mobilapp (i18n)

Ha Expo-val fejlesztünk mobilalkalmazást, akkor nagyon egyszerűen megoldható az, hogy különböző nyelvekre fordítsuk az app szövegeit. i18n!

Magyarul honosítjuk, lokalizáljuk az alkalmazást.

De ez nem csak az Expo-val készített mobilappokra igaz, mert az i18n alkalmazásával… STOP! Először is mi a búbánat az az i18n? Nézzük először ezt:

i18n

Ez mi ez? Valami új Terminator prototipus? Dehogy.

Az i18next rövidítése, ami az pedig az „internalization-framework”-öt rejti maga mögött. Ha az így még mindig kínai lenne, akkor ez egy JavaScriptben írt keretrendszer, ami abban segít nekünk, ha több nyelven beszélő honlapot / applikációt szeretnék alkotni. Szerintem ez most így elsőre elég is nekünk.

Hivatalos weboldalán mindent is meg lehet találni erről a cuccról.

Olvassuk el az Expo dokumentációt is!

Kiemelten fontos, hogy olvassunk utána az Expo dokumentációjában annak, hogy a legfrissebb Expo SDK (jelenleg ez a 46-os) milyen megoldást kínál erre. Előfordul, hogy egy régebbi Expo SDK egy kicsit másképpen oldotta ezt meg, vagy „NeAdjIsten” kivezetett olyan csomagokat, amiket esetleg korábban erre használtunk.

Tehát mindig, mindig nagyon fontos a doksi olvasás!

Itt az oldalon is van egy külön link gyűjtemény (kvázi „kis hibadoksi”, ha úgy tetszik), ami azokat a hibákat és megoldásaikat tartalmazza, amivel már találkoztam.

Megfelelő csomag telepítése

Ha már az Expo doksiból kiművelődtünk, akkor megtaláltuk azt is, hogy két Expo csomagot kell a projekthez telepítenünk. Az egyik az expo-localization. Valójában ezt adja a képességet nekünk, hogy lekérdezhessük például a teló nyelvét. Húú de király! Tehát egyszer kell nekünk ez:

npx expo install expo-localization

Másodszor pedig a népszerű i18n-js csomag, amivel a felületi fordításokat könnyedén meg tudjuk csinálni. Tehát ezt is telepíteni kell:

expo install i18n-js

Használat

A már szinte idegesítően emlegetett Expo doksi szerint így kell használni:

import * as Localization from 'expo-localization';
import { I18n } from 'i18n-js';

// Set the key-value pairs for the different languages you want to support.
const i18n = new I18n({
  en: { welcome: 'Hello' },
  hu: { welcome: 'Szia' },
});

// Set the locale once at the beginning of your app.
i18n.locale = Localization.locale;

Hogyan csináltam én?

Ha csak néhány szöveget kell lefordítani, akkor minden mehet egy fájlba. Csináltam egy translate.js fájlt az app.js-el azonos szinten.

A translate.js tartalma:

import * as Localization from "expo-localization";
import { I18n } from 'i18n-js';

// a fordítások:
const translations = {
    en: { welcome: "Hello", test: "Something" },
    hu: { welcome: "Szevasz"} 
}

const i18n = new I18n(translations);

i18n.locale = Localization.locale;
i18n.enableFallback = true;

export default i18n;

Importáltam a szükséges csomagokat. Csináltam egy objektumot a fordításnak. Az angol verzióban (en) szándékosan megadtam egy olyan „test” tulajdonságot, ami a magyar verzióban (hu) nincs. Miért? Rögtön kiderül. (lásd az enableFallback-es részt lentebb)

Példányosítottam. Érezd a különbséget a kis és nagy „i” betű között (I18n a kontstruktor, i18n pedig a példány).

Példányosításkor a konstruktornak átadtam a fordításokat tartalmazó translations objektumot. Ezután a locale tulajdonságban beállítottam az Expo csomag által visszaadott nyelvet (Localization.locale).

És itt a válasz a fenti miértre: az enableFallback true értéke pedig azt csinálja, hogy ha egy adott nyelvhez nincsen fordítás, akkor megkísérli azt egy másik nyelvi objektumból kinyerni. Ha ott sem találja, akkor hibát kapunk természetesen.

Részlet az app.js-ből:

import "./translate";

export default function App() {
  return (
    <View>
      <Text>{i18n.t("welcome")}</Text>
    </View>
  )

Nyelvek külön fájlba

Mivel a való életben nem csak egy-két szöveg van egy mobilalkalmazásban, én célszerűnek tartottam külön nyelvi fájlokba tenni az egyes fordításokat. A fájlok JSON formátumban tárolják az adatokat, és ezeket importálom be.

Itt a részlet, aztán lentebb egy működő példa, amit ki is lehet próbálni:

import en from "../translations/en.json";
import hu from "../translations/hu.json";

const translations = {
    ...en,
    ...hu
}

A változás az előzőhöz képest annyi, hogy a nyelvi fájloknak csináltam egy translations nevű mappát. Ebben csináltam egy en.json fájlt az angol, és egy hu.json fájlt a magyar fordításoknak. Tartalmuk pedig a következő:

// en.json
{
    "en": {
        "welcome": "Hello"
    }
}

//hu.json
{
    "hu": {
        "welcome": "Szevasz"
    }
}

Aztán annyit csináltam, hogy a spread operátor segítségével összefűztem a két JSON objektumot.

És akkor jöjjön a példa, hogy minden világos legyen 🙂

Működő példa

Az általam készített példa kipróbálható itt.