🥇Loome mitmekeelse rakenduse React Native'is

Tooted lokaliseerimine on rahvusvaheliste ettevõtete jaoks, kes avavad uusi riike ja regioonide turge, äärmiselt oluline. Samamoodi on lokaliseerimine vajalik ka mobiilirakenduste puhul. Kui arendaja alustab rahvusvahelist laienemist, on tähtis pakkuda kasutajatele teises riigis võimalust suhelda rakenduse liidese kaudu emakeeles. Selles artiklis loome React Native rakenduse, kasutades paketti react-native-localize.

Skillbox soovitab: Hariduslik veebikursus „Java-arendaja amet“.
Tuletame meelde: kõigile «Habra» lugejatele — 10 000 rubla soodustus, kui registreerite end Skillboxi mis tahes kursusele promokoodi «Habr» abil.

Tööriistad ja oskused

Selle artikli mõistmiseks on vajalik vähemalt baasete oskused React Native'is. Töökoha seadistamise kohta saad tutvuda ametlike juhistega.

Me vajame järgmisi tarkvaratööriistade versioone:

Node v10.15.0
npm 6.4.1
yarn 1.16.0
react-native 0.59.9
react-native-localize 1.1.3
i18n-js 3.3.0

Alustame

Loome rakenduse, mis toetab inglise, prantsuse ja araabia keelt. Esmalt loome uue projekti, kasutades react-native-cli. Selleks tuleb terminalis sisestada järgmine käsk:

$ react-native init multiLanguage
$ cd multiLanguage

Lisame vajalikud teegid

Esmalt peame installima react-native-localize, sisestades järgmise käsu:
$ yarn add react-native-localize

Kui installimise käigus tekib probleeme, tasub on uurida installatsioonijuhendit.

react-native-localize teek annab arendajale juurdepääsu mitmekeelsusele. Kuid see vajab veel ühte teeki — i18n.

Artiklis kirjeldatakse kasutamist I18n.js et tagada tõlge JavaScriptis.

$ yarn add i18n-js

Kuna i18n-js ei paku vahemälistamist ega mälestamist, soovitan selle jaoks kasutada lodash.memoize:

$ yarn add lodash.memoize

Tõlgete haldamine

Et rakendus oskaks töötada ka teiste keeltega, tuleb kõigepealt luua kataloog translations kausta src, seejärel - kolm JSON faili iga keele jaoks.

1. en.json inglise keele jaoks;

2. fr.json prantsuse keele jaoks;

3. ar.json araabia keele jaoks.

Need failid sisaldavad JSON objekte koos võtmete ja väärtustega. Võti on iga keele jaoks sama. Seda kasutab rakendus tekstilise teabe kuvamiseks.

Väärtus (value) on tekst, mida tuleb kasutajale näidata.

Inglise keel:

{ "hello": "Hello World!"}

Prantsuskeelne

{ "hello": "Salut le Monde!"}

Araabia

{ "hello": "أهلاً بالعالم"}

Sarnaselt saab lisada ka teisi keeli.

Põhikood

Sellel etapil tuleks avada fail App.js ja lisada sellesse import:

import React from "react";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";
import memoize from "lodash.memoize"; // Kasutamiseks vahemälu/memoize parema jõudluse saavutamiseks
 
import {
  I18nManager,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View
} from "react-native";

Seejärel lisame abifunktsioonid ja konstantid, mis tulevad hiljem kasuks.

const translationGetters = {
  // laiskad nõuded (metro bundler ei toeta sümboleid)
  ar: () => require("./src/translations/ar.json"),
  en: () => require("./src/translations/en.json"),
  fr: () => require("./src/translations/fr.json")
};
 
const translate = memoize(
  (key, config) => i18n.t(key, config),
  (key, config) => (config ? key + JSON.stringify(config) : key)
);
 
const setI18nConfig = () => {
  // varu, kui ükski saadaval olev keel ei sobi
  const fallback = { languageTag: "en", isRTL: false };
 
  const { languageTag, isRTL } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
    fallback;
 
  // tühjenda tõlke vahemälu
  translate.cache.clear();
  // uuenda paigutuse suunda
  I18nManager.forceRTL(isRTL);
  // seadista i18n-js konfigureerimine
  i18n.translations = { [languageTag]: translationGetters[languageTag]() };
  i18n.locale = languageTag;
};

Nüüd loome klassikomponendi App:

export default class App extends React.Component {
  constructor(props) {
    super(props);
    setI18nConfig(); // seadist konfiguratsiooni
  }
 
  componentDidMount() {
    RNLocalize.addEventListener("change", this.handleLocalizationChange);
  }
 
  componentWillUnmount() {
    RNLocalize.removeEventListener("change", this.handleLocalizationChange);
  }
 
  handleLocalizationChange = () => {
    setI18nConfig();
    this.forceUpdate();
  };
 
  render() {
    return (
      
        {translate("hello")}
      
    );
  }
}
 
const styles = StyleSheet.create({
  safeArea: {
    backgroundColor: "white",
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  value: {
    fontSize: 18
  }
});

Esimene element — setI18nConfig() — seadistab algse konfiguratsiooni.

Siis tuleb componentDidMount() meetodis lisada sündmuste kuulamine; see element jälgib uuendusi ja kutsub handleLocalizationChange() välja, kui need toimuvad.

Meetod handleLocalizationChange() aktiveerib setI18nConfig() ja forceUpdate(). See on vajalik Android-seadmete jaoks, kuna komponent peab olema renderdatud, et muutused oleksid nähtavad.

Siis tuleb kuulamine eemaldada componentWillUnmount() meetodist.

Lõpuks tagastatakse render() funktsioonis hello, kasutades translate() koos key parameetriga. Pärast neid toiminguid saab rakendus aru, milline keel on vajalik, ja kuvab sõnumid just selles keeles.

Rakenduse käivitamine

Nüüd on õige aeg kontrollida, kuidas tõlge töötab.

Esialgu käivitame rakenduse simulaatoris või emulatoris, sisestades

$ react-native run-ios
$ react-native run-android

See näeb välja umbes nii:

Nüüd proovime keel Prantsuse keeleks vahetada ja seejärel rakenduse uuesti käivitada.

Araabiakeele puhul teeme sama, erinevust ei ole.

Kuni kõik läheb hästi.

Aga mis juhtub, kui valida juhuslik keel, mille tõlget rakenduses ei ole?

Selgub, et findBestLanguage ülesanne on pakkuda parimat võimalikku tõlget. Tulemusena kuvatakse keel, mis on seatud vaikevariant.

See puudutab telefoni seadistusi. Näiteks saab iOS emulaatoris vaadata keelte järjekorda.

Kui valitud keel ei ole eelistatud, tagastab findBestAvailableLanguage undefined, nii et kuvatakse see keel, mis on seatud vaikevaateks.

Boonus

react-native-localize-l on API, mis pakub juurdepääsu ulatuslikule keeleelementide kogumile. Enne alustamist soovitame tutvuda dokumentatsiooniga.

Järeldused

Rakenduse mitmekeelsus on lihtne saavutada. React-native-localize on suurepärane valik, mis võimaldab laiendada rakenduse kasutajaskonda.

Projekti algkood leiab siit.

Skillbox soovitab:

Kaheaastane praktiline kursus „Ma olen PRO veebiarendaja“.

Veebikursus „C#-arendaja nullist“.

Praktiline aastakursus „PHP arendaja algusest PRO-ni“.

Allikas: habr.com

Kirjutame mitmekeelse rakenduse React Native'is