🥇Kirjoitamme monikielisen sovelluksen React Native

Tuotteiden lokalisointi on erittäin tärkeää kansainvälisille yrityksille, jotka kehittävät uusia maita ja alueita. Samoin lokalisointia tarvitaan mobiilisovelluksissa. Jos kehittäjä aloittaa kansainvälisen laajentumisen, on tärkeää antaa toisen maan käyttäjille mahdollisuus työskennellä käyttöliittymän kanssa omalla äidinkielellään. Tässä artikkelissa luomme React Native -sovelluksen paketin avulla reagoi-alkuperäinen-lokalisoi.

Skillbox suosittelee: Kouluttava verkkokurssi "Ammatti Java-kehittäjä".
Muistutamme sinua: kaikille "Habrin" lukijoille - 10 000 ruplan alennus ilmoittautuessaan mille tahansa Skillbox-kurssille "Habr" -tarjouskoodilla.

Työkalut ja taidot

Tämän artikkelin ymmärtäminen edellyttää React Nativen perustaitoja. Voit tutustua työkoneen asetuksiin käytä virallisia ohjeita.

Tarvitsemme nämä ohjelmistotyökalujen versiot:

Node v10.15.0
npm 6.4.1
lanka 1.16.0
react-native 0.59.9
react-native-localisoi 1.1.3
i18n-js 3.3.0

Aloittaminen

Luomme sovelluksen, joka tukee englantia, ranskaa ja arabiaa. Ensin luodaan uusi projekti käyttämällä react-native-cli. Tätä varten sinun on kirjoitettava terminaaliin tämä:

$ react-native init monikielinen
$ cd monikielinen

Tarvittavien kirjastojen lisääminen

Ensimmäinen vaihe on asentaa react-native-localize kirjoittamalla seuraava:
$ lanka add react-native-localize

Jos kohtaat ongelmia asennuksen aikana, katso asennusohje.

React-native-localize -kirjasto antaa kehittäjälle pääsyn monikielisiin ominaisuuksiin. Mutta hän tarvitsee toisen kirjaston - i18n.

Artikkelissa kuvataan käyttöä I18n.js tarjotakseen käännöksen JavaScriptissä.

$ lanka lisää i18n-js

No, koska i18n-js ei tarjoa välimuistia tai muistiinpanoa, suosittelen käyttämään lodash.memoizea tähän:

$ lanka lisää lodash.memoize

Työskentely käännösten kanssa

Jotta sovellus toimisi muiden kielten kanssa, sinun on ensin luotava käännöshakemisto src:n sisään ja sitten kolme JSON-tiedostoa kullekin kielelle.

1. en.json englanniksi;

2. fr.json ranskaksi;

3. ar.json arabiaksi.

Nämä tiedostot sisältävät JSON-objekteja avaimilla ja arvoilla. Avain on sama jokaisella kielellä. Sovellus käyttää sitä tekstitietojen näyttämiseen.

Arvo (arvo) on teksti, joka on näytettävä käyttäjälle.

Englanti:

{ "hello": "Hei maailma!"}

Французский

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

Арабский

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

Muita kieliä voidaan lisätä samalla tavalla.

Pääkoodi

Tässä vaiheessa sinun on avattava App.js-tiedosto ja lisättävä siihen tuontia:

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

Sen jälkeen lisätään apufunktioita ja vakioita, joista on hyötyä myöhemmin.

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

No, nyt luodaan App-luokan komponentti:

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

Ensimmäinen elementti, setI18nConfig(), määrittää alkukokoonpanon.

Sitten meidän on lisättävä tapahtumien kuuntelija komponenttiDidMount() -elementtiin, tämä elementti kuuntelee päivityksiä ja kutsuu handleLocalizationChange() -toimintoa, kun ne tapahtuvat.

HandelLocalizationChange()-menetelmä kutsuu setI18nConfig() ja forceUpdate(). Tämä on välttämätöntä Android-laitteille, koska komponentti on renderöitävä, jotta muutokset tulevat näkyviin.

Sitten meidän on poistettava kuuntelija komponenttiWillUnmount()-metodista.

Lopuksi hello palautetaan render():ssä käyttämällä translate()-komentoa ja lisäämällä siihen avainparametri. Näiden vaiheiden jälkeen sovellus voi "ymmärtää" mitä kieltä tarvitaan ja näyttää viestejä sillä.

Sovelluksen käynnistäminen

Nyt on aika tarkistaa, miten käännös toimii.

Ensin suoritamme sovelluksen simulaattorissa tai emulaattorissa kirjoittamalla

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

Se näyttää suunnilleen tältä:

Nyt voit yrittää vaihtaa kielen ranskaksi käynnistämällä sovelluksen.

Teemme samoin arabian kielellä, sillä ei ole eroa.

Toistaiseksi kaikki menee hyvin.

Mutta mitä tapahtuu, jos valitset satunnaisen kielen, jolle ei ole käännöstä sovelluksessa?

Osoittautuu, että findBestLanguagen tehtävänä on tarjota paras mahdollinen käännös kaikista saatavilla olevista. Tämän seurauksena oletusarvoisesti asetettu kieli näytetään.

Kyse on puhelimen asetuksista. Joten esimerkiksi iOS-emulaattorissa voit nähdä kielten järjestyksen.

Jos valittu kieli ei ole ensisijainen kieli, findBestAvailableLanguage palauttaa määrittämättömän, joten oletuskieli näytetään.

Bonus

react-native-localize sisältää API:n, joka tarjoaa pääsyn suureen määrään kielielementtejä. Ennen työn aloittamista, kannattaa lukea dokumentaatio.

Tulokset

Sovelluksesta voidaan tehdä monikielinen ilman ongelmia. React-native-localize on loistava vaihtoehto, jonka avulla voit laajentaa sovelluksesi käyttäjien määrää.

Projektin lähdekoodi sijaitsee täällä.

Skillbox suosittelee:

Kahden vuoden käytännön kurssi "Olen PRO-verkkokehittäjä".

Verkkokurssi "C#-kehittäjä tyhjästä".

Käytännön vuoden kurssi "PHP-kehittäjä 0:sta PRO".

Lähde: will.com

Kirjoitamme monikielisen sovelluksen React Nativessa