🥇Pišemo večjezično aplikacijo v React Native

Lokalizacija izdelkov je zelo pomembna za mednarodna podjetja, ki raziskujejo nove države in regije. Podobno je lokalizacija potrebna za mobilne aplikacije. Če razvijalec začne mednarodno širitev, je pomembno, da uporabnikom iz druge države omogočite delo z vmesnikom v svojem maternem jeziku. V tem članku bomo s paketom ustvarili aplikacijo React Native react-native-localize.

Skillbox priporoča: Izobraževalni spletni tečaj "Poklic Java razvijalec".
Spomnimo: za vse bralce "Habr" - popust v višini 10 rubljev ob vpisu v kateri koli tečaj Skillbox s promocijsko kodo "Habr".

Orodja in veščine

Za razumevanje tega članka potrebujete osnovne veščine dela z React Native. Če se želite seznaniti z nastavitvami delovnega stroja, lahko uporabite uradna navodila.

Potrebovali bomo te različice programskih orodij:

Vozlišče v10.15.0
npm 6.4.1
preja 1.16.0
react-native 0.59.9
react-native-localize 1.1.3
i18n-js 3.3.0

Начинаем

Ustvarili bomo aplikacijo, ki bo podpirala angleščino, francoščino in arabščino. Najprej ustvarimo nov projekt z uporabo react-native-cli. Če želite to narediti, morate v terminal vnesti to:

$ react-native init multiLanguage
$ cd večjezičnost

Dodajanje potrebnih knjižnic

Prvi korak je namestitev react-native-localize, tako da vnesete naslednje:
$ yarn add react-native-localize

Če se med postopkom namestitve pojavijo težave, Vredno je prebrati priročnik za namestitev.

Knjižnica react-native-localize omogoča razvijalcu dostop do večjezičnih funkcij. Vendar potrebuje še eno knjižnico - i18n.

Ta članek opisuje uporabo I18n.js da bi zagotovili prevod v JavaScript.

$ preje dodajte i18n-js

No, ker i18n-js ne zagotavlja predpomnjenja ali memoizacije, predlagam, da za to uporabite lodash.memoize:

$ preja dodaj lodash.memoize

Delo s prevodi

Da bi aplikacija lahko delovala z drugimi jeziki, morate najprej ustvariti imenik prevodov znotraj src, nato pa tri datoteke JSON za vsak jezik.

1. en.json za angleščino;

2. fr.json za francoščino;

3. ar.json za arabščino.

Te datoteke vsebujejo objekte JSON s ključi in vrednostmi. Ključ bo enak za vsak jezik. Aplikacija ga uporablja za prikaz besedilnih informacij.

Vrednost je besedilo, ki mora biti prikazano uporabniku.

Angleščina:

{"hello": "Pozdravljen svet!"}

Французский

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

Arabščina

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

Na enak način lahko dodate druge jezike.

Glavna koda

Na tej točki morate odpreti datoteko App.js in ji dodati uvoze:

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

Po tem se dodajo pomožne funkcije in konstante, ki bodo uporabne kasneje.

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, zdaj pa ustvarimo komponento razreda 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 (
      <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
  }
});

Prvi element, setI18nConfig(), nastavi začetno konfiguracijo.

Nato morate dodati poslušalca dogodkov v componentDidMount(), ta element bo poslušal posodobitve in poklical handleLocalizationChange(), ko se zgodijo.

Metoda handleLocalizationChange() aktivira setI18nConfig() in forceUpdate(). To je potrebno za naprave Android, saj mora biti komponenta upodobljena, da so spremembe opazne.

Nato morate odstraniti poslušanje iz metode componentWillUnmount().

Na koncu render() vrne pozdrav z uporabo translate() in mu doda ključni parameter. Po teh korakih bo aplikacija lahko "razumela", kateri jezik je potreben, in prikazala sporočila v njem.

Zagon aplikacije

Zdaj je čas, da preverite, kako prevod deluje.

Najprej s tipkanjem zaženemo aplikacijo v simulatorju ali emulatorju

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

Videti bo nekako takole:

Zdaj lahko poskusite spremeniti jezik v francoščino tako, da zaženete aplikacijo.

Enako delamo z arabščino, ni razlike.

Zaenkrat gre dobro.

Toda kaj se zgodi, če izberete naključni jezik, za katerega v aplikaciji ni prevoda?

Izkazalo se je, da je naloga findBestLanguage zagotoviti optimalen prevod izmed vseh razpoložljivih. Posledično bo prikazan privzeti jezik.

Govorimo o nastavitvah telefona. Na primer, v emulatorju iOS lahko vidite vrstni red jezikov.

Če izbrani jezik ni prednostni jezik, funkcija findBestAvailableLanguage vrne nedefinirano, tako da je prikazan privzeti jezik.

bonus

react-native-localize ima API, ki omogoča dostop do velikega števila jezikovnih elementov. Preden začnete z delom, Vredno je preveriti dokumentacijo.

Ugotovitve

Aplikacijo je mogoče narediti večjezično brez težav. React-native-localize je odlična možnost, ki vam omogoča razširitev uporabniške baze vaše aplikacije.

Izvorna koda projekta je tukaj.

Skillbox priporoča:

Dvoletni praktični tečaj "Sem PRO spletni razvijalec".

Spletni tečaj "C# razvijalec iz nič".

Praktični enoletni tečaj "PHP razvijalec od 0 do PRO".

Vir: www.habr.com

Pisanje večjezične aplikacije v React Native