🥇Píšeme viacjazyčnú aplikáciu v React Native

Lokalizácia produktov je veľmi dôležitá pre medzinárodné spoločnosti, ktoré skúmajú nové krajiny a regióny. Podobne je potrebná lokalizácia pre mobilné aplikácie. Ak vývojár začne s medzinárodnou expanziou, je dôležité dať používateľom z inej krajiny možnosť pracovať s rozhraním v ich rodnom jazyku. V tomto článku vytvoríme pomocou balíka aplikáciu React Native reagovať-natívne-lokalizovať.

Skillbox odporúča: Vzdelávací online kurz "Profesia Java Developer".
Pripomíname vám: pre všetkých čitateľov „Habr“ - zľava 10 000 rubľov pri registrácii do akéhokoľvek kurzu Skillbox pomocou propagačného kódu „Habr“.

Nástroje a zručnosti

Na pochopenie tohto článku potrebujete základné zručnosti v práci s React Native. Aby ste sa zoznámili s nastaveniami pracovného stroja, môžete použite oficiálne pokyny.

Budeme potrebovať tieto verzie softvérových nástrojov:

Uzol v10.15.0
npm 6.4.1
priadza 1.16.0
reaktívny 0.59.9
reakt-native-localize 1.1.3
i18n-js 3.3.0

Začíname

Vytvoríme aplikáciu, ktorá bude podporovať angličtinu, francúzštinu a arabčinu. Najprv vytvoríme nový projekt pomocou respond-native-cli. Ak to chcete urobiť, musíte do terminálu zadať toto:

$ reakt-native init multiLanguage
$ cd viacjazyčné

Pridanie potrebných knižníc

Prvým krokom je nainštalovať reakt-native-localize zadaním nasledujúceho:
$ priadza pridať reakt-natívne-lokalizovať

Ak sa počas procesu inštalácie vyskytnú problémy, Oplatí sa prečítať si návod na inštaláciu.

Knižnica reakt-native-localize poskytuje vývojárom prístup k viacjazyčným funkciám. Potrebuje však ešte jednu knižnicu - i18n.

Tento článok popisuje použitie I18n.js s cieľom poskytnúť preklad do JavaScriptu.

$ priadza pridať i18n-js

Keďže i18n-js neposkytuje ukladanie do vyrovnávacej pamäte ani ukladanie do pamäte, navrhujem na to použiť lodash.memoize:

$ priadza pridať lodash.memoize

Práca s prekladmi

Aby aplikácia mohla pracovať s inými jazykmi, musíte najprv vytvoriť adresár pre preklady v src a potom tri súbory JSON pre každý jazyk.

1. en.json pre angličtinu;

2. fr.json pre francúzštinu;

3. ar.json pre arabčinu.

Tieto súbory obsahujú objekty JSON s kľúčmi a hodnotami. Kľúč bude rovnaký pre každý jazyk. Používa ho aplikácia na zobrazenie textových informácií.

Hodnota je text, ktorý sa musí zobraziť používateľovi.

Angličtina:

{"hello": "Ahoj svet!"}

Французский

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

Арабский

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

Rovnakým spôsobom môžete pridať ďalšie jazyky.

Hlavný kód

V tomto bode musíte otvoriť súbor App.js a pridať doň importy:

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

Potom sa pridajú pomocné funkcie a konštanty, ktoré budú užitočné neskôr.

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

Teraz vytvoríme komponent triedy 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
  }
});

Prvý prvok, setI18nConfig(), nastavuje počiatočnú konfiguráciu.

Potom musíte pridať poslucháč udalostí do componentDidMount(), tento prvok bude počúvať aktualizácie a keď k nim dôjde, zavolá handleLocalizationChange().

Metóda handleLocalizationChange() aktivuje setI18nConfig() a forceUpdate(). Je to potrebné pre zariadenia so systémom Android, pretože komponent musí byť vykreslený, aby boli zmeny viditeľné.

Potom musíte odstrániť počúvanie z metódy componentWillUnmount().

Nakoniec render() vráti ahoj pomocou translate() a pridaním kľúčového parametra. Po týchto krokoch bude aplikácia schopná „pochopiť“, aký jazyk je potrebný a zobrazovať v ňom správy.

Spustenie aplikácie

Teraz je čas skontrolovať, ako preklad funguje.

Najprv spustíme aplikáciu v simulátore alebo emulátore písaním

$ reakt-native run-ios
$ reakt-native run-android

Bude to vyzerať asi takto:

Teraz môžete skúsiť zmeniť jazyk na francúzštinu spustením aplikácie.

To isté robíme s arabčinou, nie je v tom žiadny rozdiel.

Zatiaľ je všetko dobré.

Čo sa však stane, ak vyberiete náhodný jazyk, pre ktorý v aplikácii neexistuje preklad?

Ukazuje sa, že úlohou findBestLanguage je poskytnúť optimálny preklad zo všetkých dostupných. V dôsledku toho sa zobrazí predvolený jazyk.

Hovoríme o nastaveniach telefónu. Napríklad v emulátore iOS môžete vidieť poradie jazykov.

Ak vybraný jazyk nie je preferovaným jazykom, funkcia findBestAvailableLanguage vráti hodnotu nedefinovaná, takže sa zobrazí predvolený jazyk.

Prémie

reakt-native-localize má API, ktoré poskytuje prístup k veľkému množstvu jazykových prvkov. Skôr ako začnete pracovať, Stojí za to pozrieť si dokumentáciu.

Závery

Aplikácia môže byť bez problémov viacjazyčná. React-native-localize je skvelá možnosť, ktorá vám umožní rozšíriť používateľskú základňu vašej aplikácie.

Zdrojový kód projektu Je tu.

Skillbox odporúča:

Dvojročný praktický kurz "Som PRO web developer".

Online kurz "C# vývojár od nuly".

Praktický ročníkový kurz "PHP vývojár od 0 po PRO".

Zdroj: hab.com

Písanie viacjazyčnej aplikácie v React Native