Kirjutame mitmekeelse rakenduse React Native'is

Toodete lokaliseerimine on väga tähtis rahvusvahelistele ettevõtetele, kes siseneb uutele riikidele ja piirkondadele. Sarnaselt on lokaliseerimist vaja ka mobiilirakendustele. Kui arendaja alustab rahvusvahelist laienemist, on oluline, et kasutajad teises riigis saaks töötada liidesega oma emakeeles. Selles artiklis loome React Native'i rakenduse, kasutades paketti react-native-localize.

Skillbox soovitab: Haridusalane veebikursus «Java-arendaja amet».
Tuletame meelde: kõigile «Habr» lugejatele – 10 000 rubla allahindlus igale Skillboxi kursusele, kasutades sooduskoodi «Habr».

Tööriistad ja oskused

Selle artikli mõistmiseks on vaja baastaset React Native'i väljatöötamisel. Töökoha seadistamisega tutvumiseks võib kasutada ametlikku juhendit.

Me vajame järgmisi tarkvarainstrumentide 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. Esiteks loome uue projekti, kasutades react-native-cli. Selleks tuleb terminalis sisestada järgnev:

$ react-native init multiLanguage
$ cd multiLanguage

Lisame vajalikud teegid

Esmalt tuleb installida react-native-localize, sisestades järgnev:
$ yarn add react-native-localize

Kui installimise käigus tekivad probleemid, on mõistlik tutvuda paigaldusjuhendiga.

Teek react-native-localize annab arendajale juurdepääsu mitmekeelsele funktsionaalsusele. Kuid see vajab veel ühe teegi — i18n.

Artiklis kirjeldatakse selle kasutamist I18n.js JavaScriptis tõlgete tagamiseks.

$ yarn add i18n-js

Kuna i18n-js ei paku vahemälu ega meemoiseerimist, soovitan selle jaoks kasutada lodash.memoize:

$ yarn add lodash.memoize

Tõlgete haldamine

Kuna rakendus peab toetama ka teisi keeli, tuleb esmalt luua kaust translations kausta src sisse, seejärel — kolm JSON faili, igaühe jaoks eraldi keel.

1. en.json inglise keele jaoks;

2. fr.json prantsuse keele jaoks;

3. ar.json araabia keele jaoks.

Need failid sisaldavad JSON objekti, millel on võtmed ja väärtused. Võti on iga keele jaoks sama. Seda kasutatakse rakenduses tekstilise informatsiooni kuvamiseks.

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

Inglise keel:

{ "hello": "Hello World!"}

Prantsuse keel

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

Araabia keel

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

Samamoodi on võimalik lisada ka teisi keeli.

Põhikood

Sellel etapil tuleb avada fail App.js ja lisada sinna import:

import React from "react";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";
import memoize from "lodash.memoize"; // Use for caching/memoize for better performance
 
import {
  I18nManager,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View
} from "react-native";

Pärast seda lisatakse abifunktsioonid ja konstantsid, mis on tulevikus kasulikud.

const translationGetters = {
  // lazy requires (metro bundler does not support symlinks)
  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 = () => {
  // fallback if no available language fits
  const fallback = { languageTag: "en", isRTL: false };
 
  const { languageTag, isRTL } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
    fallback;
 
  // clear translation cache
  translate.cache.clear();
  // update layout direction
  I18nManager.forceRTL(isRTL);
  // set i18n-js config
  i18n.translations = { [languageTag]: translationGetters[languageTag]() };
  i18n.locale = languageTag;
};

Aga nüüd loome klassikomponendi App:

export default class App extends React.Component {
  constructor(props) {
    super(props);
    setI18nConfig(); // set initial config
  }
 
  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() — seab algse konfiguratsiooni.

Seejärel peab componentDidMount() lisama sündmuste jälgimise, see element jälgib uuendusi ja kutsub handleLocalizationChange() välja siis, kui need toimuvad.

Meetod handleLocalizationChange() aktiveerib setI18nConfig() ja forceUpdate(). See on vajalik Androidi seadmetes, kuna komponent tuleb renderdada, et muutused oleksid nähtavad.

Seejärel tuleks eemaldada jälgimine componentWillUnmount() meetodist.

Lõpuks tagastatakse render() meetodis hello, kasutades translate() ja lisades sellele parameetri key. Pärast neid toiminguid suudab rakendus "mõista", millist keelt on vaja, ja näitab sõnumeid just sellel keeles.

Rakenduse käivitamine

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

Esiteks käivitame rakenduse simulaatoris või emulaatoris, tippides

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

See näeb välja umbes nii:

Nüüd saab proovida keelest välja vahetada prantsuse keele, käivitades seejärel rakenduse.

Araabia keele puhul teeme sama, vahet ei ole.

Praegu läheb kõik hästi.

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

Selgub, et ülesanne findBestLanguage on pakkuda parimat võimalikku tõlget. Tulemuseks kuvatakse keel, mis on vaikeseade.

Juttu on telefoni sättetest. Näiteks iOS-i simulatores saab vaadata keelte järjekorda.

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

Boonus

react-native-localize-l on API, mis annab ligipääsu suurele hulgale keeleelementidele. Enne alustamist tasub tutvuda dokumentatsiooniga..

Järeldused

Rakenduse saab muuta mitmekeelseks ilma eriliste probleemideta. React-native-localize on suurepärane lahendus, mis võimaldab laiendada rakenduse kasutajate ringi.

Projekti lähtekood asub siin..

Skillbox soovitab:

• Kaks aastat praktilist kursust „Mina olen PRO veebiarendaja“.
• Veebikursus „C#-arendaja algusest peale“.
• Praktiline aastakursus «PHP-arendaja 0-st PRO-ni».

Allikas: habr.com