🥇Kirjutame mitmekeelse rakenduse React Native

Toodete lokaliseerimine on väga oluline rahvusvahelistele ettevõtetele, kes arendavad uusi riike ja piirkondi. Samamoodi on lokaliseerimine vajalik mobiilirakenduste jaoks. Kui arendaja alustab rahvusvahelist laienemist, on oluline anda teise riigi kasutajatele võimalus töötada liidesega nende emakeeles. Selles artiklis loome paketi abil rakenduse React Native reageerima-native-lokaliseerima.

Skillbox soovitab: Hariv veebikursus "Java arendaja elukutse".
Tuletame meelde: kõigile "Habr" lugejatele - allahindlus 10 000 rubla, kui registreerute mis tahes Skillboxi kursusele, kasutades sooduskoodi "Habr".

Tööriistad ja oskused

Selle artikli mõistmiseks on vaja React Native'i põhioskusi. Töömasina seadistustega tutvumiseks saate kasutage ametlikke juhiseid.

Vajame järgmisi tarkvaratööriistade versioone:

Sõlm v10.15.0
npm 6.4.1
lõng 1.16.0
reageeriv-native 0.59.9
react-native-localize 1.1.3
i18n-js 3.3.0

Alustamine

Loome rakenduse, mis toetab inglise, prantsuse ja araabia keelt. Kõigepealt loome react-native-cli abil uue projekti. Selleks peate terminali sisestama järgmise:

$ react-native init multiLanguage
$ cd mitmekeelne

Vajalike teekide lisamine

Esimene samm on installida react-native-localize, tippides järgmise:
$ yarn add react-native-localize

Kui teil tekib installiprotsessi ajal probleeme, tutvu paigaldusjuhendiga.

React-native-localisize teek annab arendajale juurdepääsu mitmekeelsetele funktsioonidele. Kuid ta vajab teist raamatukogu - i18n.

Artiklis kirjeldatakse selle kasutamist I18n.js JavaScripti tõlke pakkumiseks.

$ lõng lisada i18n-js

Noh, kuna i18n-js ei paku vahemällu ega meeldejätmist, soovitan selleks kasutada lodash.memoize:

$ lõng lisa lodash.memoize

Töö tõlgetega

Selleks, et rakendus töötaks hästi teiste keeltega, peate esmalt looma src-s tõlgete kataloogi ja seejärel iga keele jaoks kolm JSON-faili.

1. en.json inglise keele jaoks;

2. fr.json prantsuse keeles;

3. ar.json araabia jaoks.

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

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

Inglise:

{ "tere": "Tere maailm!"}

Французский

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

Арабский

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

Teisi keeli saab lisada samal viisil.

Põhikood

Sel hetkel peate avama faili App.js ja lisama sellele impordid:

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 konstandid, millest on hiljem kasu.

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

Noh, nüüd loome rakenduse klassi komponendi:

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 (
      <SafeAreaView style={styles.safeArea}>
        <Text style={styles.value}>{translate("hello")}</Text>
      </SafeAreaView>
    );
  }
}
 
const styles = StyleSheet.create({
  safeArea: {
    backgroundColor: "white",
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  value: {
    fontSize: 18
  }
});

Esimene element setI18nConfig() määrab esialgse konfiguratsiooni.

Seejärel peame lisama sündmusekuulaja üksusesse componentDidMount() , see element kuulab värskendusi ja kutsub nende ilmnemisel esile käsku handleLocalizationChange().

Meetod handleLocalizationChange() kutsub esile setI18nConfig() ja forceUpdate(). See on vajalik Android-seadmete jaoks, kuna muudatuste nähtavaks muutumiseks tuleb komponent renderdada.

Seejärel peame eemaldama kuulaja komponentWillUnmount() meetodist.

Lõpuks tagastatakse tere failis render() kasutades translate() ja lisades sellele võtmeparameetri. Pärast neid samme saab rakendus „mõista“, millist keelt on vaja, ja kuvab selles sõnumeid.

Rakenduse käivitamine

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

Esmalt käivitame rakenduse simulaatoris või emulaatoris tippimise teel

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

See näeb välja umbes selline:

Nüüd saate rakenduse käivitades proovida keele prantsuse keeleks muuta.

Sama teeme ka araabia keelega, vahet pole.

Siiani läheb kõik hästi.

Aga mis juhtub, kui valite juhusliku keele, millel pole rakenduses tõlget?

Selgub, et FindBestLanguage'i ülesanne on pakkuda parimat võimalikku tõlget kõigist saadaolevatest. Selle tulemusel kuvatakse vaikimisi määratud keel.

See puudutab telefoni seadeid. Nii näete näiteks iOS-i emulaatoris keelte järjekorda.

Kui valitud keel ei ole eelistatud keel, tagastab findBestAvailableLanguage määramata, nii et kuvatakse vaikekeel.

Boonus

React-native-localize omab API-t, mis pakub juurdepääsu suurele hulgale keeleelementidele. Enne tööle asumist, tasub lugeda dokumentatsiooni.

Järeldused

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

Projekti lähtekood asub siin.

Skillbox soovitab:

Kaheaastane praktiline kursus "Ma olen PRO veebiarendaja".

Veebikursus "C# arendaja nullist".

Praktilise aasta kursus "PHP arendaja 0-st PRO-le".

Allikas: www.habr.com

Kirjutame React Native'is mitmekeelse rakenduse