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

Lokalizácia produktov je veľmi dôležitá pre medzinárodné spoločnosti, ktoré sa ujímajú nových krajín a regiónov. Rovnako je potrebná lokalizácia aj pre mobilné aplikácie. Ak sa vývojár začína s medzinárodnou expanziou, je dôležité poskytnúť používateľom z iných krajín možnosť pracovať s rozhraním v ich rodnom jazyku. V tomto článku vytvoríme aplikáciu React Native pomocou balíka react-native-localize.

Skillbox odporúča: Vzdelávací online kurz „Povolanie Java vývojár“.
Pripomíname: pre všetkých čitateľov „Habr“ — zľava 10 000 rubľov pri zapísaní na akýkoľvek kurz Skillbox s promo kódom „Habr“.

Nástroje a zručnosti

Na pochopenie tohto článku sú potrebné základné zručnosti práce s React Native. Na oboznámenie sa s nastaveniami pracovného stroja môžete využiť oficiálny návod.

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

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

Začíname

Vytvoríme aplikáciu, ktorá bude podporovať anglický, francúzsky a arabský jazyk. Najprv vytvoríme nový projekt pomocou react-native-cli. Na to je potrebné v termináli zadať nasledovné:

$ react-native init multiLanguage
$ cd multiLanguage

Pridávame potrebné knižnice

Najprv je potrebné nainštalovať react-native-localize, zadaním nasledujúceho:
$ yarn add react-native-localize

Ak sa v priebehu inštalácie vyskytnú problémy, je vhodné preštudovať si manuál k inštalácii.

Knižnica react-native-localize poskytuje vývojárovi prístup k viacjazyčným funkciám. Ale potrebujeme ešte jednu knižnicu — i18n.

V článku sa popisuje použitie I18n.js na zabezpečenie prekladu v JavaScripte.

$ yarn add i18n-js

A keďže i18n-js neposkytuje caching alebo memoizáciu, navrhujem použiť na to lodash.memoize:

$ yarn add lodash.memoize

Práca s prekladmi

Aby aplikácia mohla pracovať aj s inými jazykmi, najskôr je potrebné vytvoriť adresár translations v rámci src, potom tri JSON súbory, pre každý z jazykov.

1. en.json pre angličtinu;

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

3. ar.json pre arabský.

Tieto súbory obsahujú objekty JSON s kľúčmi a hodnotami. Kľúč bude rovnaký pre každý jazyk. Aplikácia ho používa na zobrazenie textovej informácie.

Hodnota (value) — to je text, ktorý má byť zobrazený používateľovi.

Anglický jazyk:

{ "hello": "Hello World!"}

Francúzsky

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

Arabský

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

Podobným spôsobom je možné pridávať aj ďalšie jazyky.

Hlavný kód

V tejto fáze je potrebné otvoriť súbor App.js a pridať do neho import:

import React from "react";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";
import memoize from "lodash.memoize"; // Použiť na cachovanie/memoize pre lepší výkon
 
import {
  I18nManager,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View
} from "react-native";

Po tomto sa pridajú pomocné funkcie a konštanty, ktoré sa budú neskôr hodiť.

const translationGetters = {
  // lenivé vyžiadania (metro bundler nepodporuje symlinky)
  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 ak žiadny dostupný jazyk nevyhovuje
  const fallback = { languageTag: "en", isRTL: false };
 
  const { languageTag, isRTL } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
    fallback;
 
  // vyčistiť cache pre preklady
  translate.cache.clear();
  // aktualizovať smerovanie rozloženia
  I18nManager.forceRTL(isRTL);
  // nastaviť i18n-js konfiguráciu
  i18n.translations = { [languageTag]: translationGetters[languageTag]() };
  i18n.locale = languageTag;
};

A teraz vytvoríme komponentu triedy App:

export default class App extends React.Component {
  constructor(props) {
    super(props);
    setI18nConfig(); // nastaviť počiatočnú konfiguráciu
  }
 
  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
  }
});

Prvým prvkom je setI18nConfig() — nastavenie počiatočnej konfigurácie.

Potom v componentDidMount() je potrebné pridať počúvanie udalostí, tento prvok bude sledovať aktualizácie a vyvolávať handleLocalizationChange() v prípade, že k nim dôjde.

Metóda handleLocalizationChange() aktivuje setI18nConfig() a forceUpdate(). To je potrebné pre zariadenia na Android, pretože komponent musí byť rendrovaný, aby sa zmeny stali viditeľnými.

Potom je potrebné odstrániť počúvanie v metóde componentWillUnmount().

Nakoniec, v render() sa vracia hello pomocou translate() a pridania parametra key. Po týchto krokoch aplikácia bude "rozumieť", aký jazyk je potrebný, a zobrazí správy práve v ňom.

Spustenie aplikácie

Teraz je čas skontrolovať, ako funguje preklad.

Najprv spustíme aplikáciu v simulátore alebo emulátore, zadávaním

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

Malo by to vyzerať približne takto:

Teraz môžete skúsiť zmeniť jazyk na francúzštinu a následne spustiť aplikáciu.

S arabským jazykom robíme to isté, nie je v tom žiadny rozdiel.

Zatiaľ všetko ide dobre.

Ale čo sa stane, ak vyberieme náhodný jazyk, pre ktorý v aplikácii nie je preklad?

Ukazuje sa, že úloha findBestLanguage spočíva v poskytovaní optimálneho prekladu zo všetkých dostupných. Výsledkom bude jazyk, ktorý bol nastavený ako predvolený.

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

Ak vybraný jazyk nie je preferovaný, findBestAvailableLanguage vracia undefined, takže sa zobrazí jazyk, ktorý je nastavený ako predvolený.

Bonus

react-native-localize má API, ktoré poskytuje prístup k veľkému množstvu jazykových prvkov. Predtým, ako začnete pracovať, je dobré oboznámiť sa s dokumentáciou..

Zhrnutie

Aplikáciu možno bez problémov urobiť viacjazyčnou. React-native-localize je skvelá možnosť, ktorá umožňuje rozšíriť okruh používateľov aplikácie.

Zdrojový kód projektu nachádza sa tu..

Skillbox odporúča:

Dvojročný praktický kurz „Som webový vývojár PRO“.

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

Praktický ročný kurz „PHP vývojár od 0 do PRO“.

Zdroj: habr.com

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