🥇Vytváříme vícejazyčnou aplikaci na React Native

Lokalizace produktů je velmi důležitá pro mezinárodní společnosti, které se snaží proniknout na nové trhy a do nových regionů. Stejně tak je lokalizace potřebná i pro mobilní aplikace. Pokud se vývojář rozhodne pro mezinárodní expanze, je důležité umožnit uživatelům z jiných zemí pracovat s rozhraním v jejich mateřském jazyce. V tomto článku vytvoříme aplikaci React Native pomocí balíčku react-native-localize.

Skillbox doporučuje: Vzdělávací online kurz „Profese Java vývojář“.
Připomínáme: pro všechny čtenáře "Habra" – sleva 10 000 korun při registraci na jakýkoli kurz Skillbox s promokódem "Habr".

Nástroje a dovednosti

Pro porozumění tomuto článku jsou potřeba základní dovednosti v React Native. Pro seznámení se s nastavením pracovní stanice můžete využít oficiální příručku.

Budeme potřebovat následující verze softwarových nástrojů:

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čínáme

Vytvoříme aplikaci, která bude podporovat angličtinu, francouzštinu a arabštinu. Nejprve vytvoříme nový projekt pomocí react-native-cli. K tomu je potřeba v terminálu zadat následující příkaz:

$ react-native init multiLanguage
$ cd multiLanguage

Přidání potřebných knihoven

Nejprve je potřeba nainstalovat react-native-localize, a to zadáním následujícího příkazu:
$ yarn add react-native-localize

Pokud se při instalaci objeví problémy, stojí za to prostudovat instalační manuál.

Knihovna react-native-localize poskytuje vývojářům přístup k vícejazyčným funkcím. Ale potřebuje ještě jednu knihovnu – i18n.

V článku se popisuje použití I18n.js pro zajištění překladu v JavaScriptu.

$ yarn add i18n-js

A protože i18n-js neposkytuje žádné caching nebo memoizaci, doporučuji použít pro to lodash.memoize:

$ yarn add lodash.memoize

Práce s překlady

Aby aplikace mohla pracovat i s jinými jazyky, je nejprve potřeba vytvořit adresář translations uvnitř src, poté — tři soubory JSON pro každý jazyk.

1. en.json pro angličtinu;

2. fr.json pro francouzštinu;

3. ar.json pro arabštinu.

Tyto soubory obsahují objekty JSON s klíči a hodnotami. Klíč bude stejný pro každý jazyk. Používá se aplikací k zobrazení textových informací.

Hodnota (value) je text, který se má zobrazit uživatelovi.

Angličtina:

{ "hello": "Hello World!"}

Francouzština

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

Arabština

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

Podobným způsobem můžete přidávat i další jazyky.

Hlavní kód

V této fázi je potřeba otevřít soubor App.js a přidat do něj import:

import React from "react";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";
import memoize from "lodash.memoize"; // Použít pro cachování/memoizaci pro lepší výkon
 
import {
  I18nManager,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View
} from "react-native";

Následují pomocné funkce a konstanty, které se budou hodit později.

const translationGetters = {
  // lazy requires (metro bundler nepodporuje 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 pokud není dostupný jazyk
  const fallback = { languageTag: "en", isRTL: false };
 
  const { languageTag, isRTL } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
    fallback;
 
  // vyčistit cache překladu
  translate.cache.clear();
  // aktualizovat směr uspořádání
  I18nManager.forceRTL(isRTL);
  // nastavit i18n-js config
  i18n.translations = { [languageTag]: translationGetters[languageTag]() };
  i18n.locale = languageTag;
};

Teď vytvoříme třídu komponentu App:

export default class App extends React.Component {
  constructor(props) {
    super(props);
    setI18nConfig(); // nastavit počáteční konfiguraci
  }
 
  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
  }
});

Prvním prvkem je setI18nConfig() — nastavuje počáteční konfiguraci.

Pak je v componentDidMount() potřeba přidat sledování událostí, tento prvek bude sledovat aktualizace a vyvolá handleLocalizationChange() kdykoli k nim dojde.

Metoda handleLocalizationChange() aktivuje setI18nConfig() a forceUpdate(). To je nutné pro zařízení na Androidu, protože komponent musí být vykreslen, aby se změny projevily.

Pak je potřeba odstranit sledování v metodě componentWillUnmount().

Nakonec v render() vracíme hello používáním translate() a přidáním parametru key. Po těchto krocích bude aplikace schopna "chápat", jaký jazyk je potřeba, a zobrazovat zprávy přesně v něm.

Spuštění aplikace

Teď je ten pravý čas zkontrolovat, jak funguje překlad.

Nejprve spustíme aplikaci v simulátoru nebo emulátoru, zadáním

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

Bude to vypadat přibližně takto:

Nyní můžete zkusit změnit jazyk na francouzský a poté aplikaci spustit.

U arabského jazyka děláme totéž, rozdíl není.

Zatím to jde dobře.

Ale co se stane, pokud vyberete náhodný jazyk, pro který není v aplikaci překlad?

Ukazuje se, že úkolem findBestLanguage je poskytnout optimální překlad ze všech dostupných. Výsledkem bude zobrazen jazyk, který byl nastaven jako výchozí.

Jedná se o nastavení telefonu. Například v emulátoru iOS můžete zkontrolovat pořadí jazyků.

Pokud vybraný jazyk není preferovaný, findBestAvailableLanguage vrací undefined, takže se zobrazí jazyk, který je nastaven jako výchozí.

Bonus

React-native-localize má API, které poskytuje přístup k velkému množství jazykových prvků. Než začnete, je dobré se seznámit s dokumentací..

Závěry

Aplikaci lze snadno udělat vícejazyčnou. React-native-localize je skvělá možnost, která umožňuje rozšířit okruh uživatelů aplikace.

Zdrojový kód projektu nachází se zde..

Skillbox doporučuje:

Dvouroční praktický kurz „Jsem webový vývojář PRO“.

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

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

Zdroj: habr.com

Vytváříme vícejazyčnou aplikaci v React Native