🥇Píšeme vícejazyčnou aplikaci na React Native

Lokalizace produktů je velmi důležitá pro mezinárodní společnosti, které rozvíjejí nové země a regiony. Podobně je potřeba lokalizace pro mobilní aplikace. Pokud vývojář zahájí mezinárodní expanzi, je důležité dát uživatelům z jiné země možnost pracovat s rozhraním v jejich rodném jazyce. V tomto článku vytvoříme pomocí balíčku aplikaci React Native reagovat-nativní-lokalizovat.

Skillbox doporučuje: Vzdělávací online kurz "Profese Java Developer".
Připomínáme: pro všechny čtenáře "Habr" - sleva 10 000 rublů při zápisu do jakéhokoli kurzu Skillbox pomocí propagačního kódu "Habr".

Nástroje a dovednosti

Pochopení tohoto článku vyžaduje základní dovednosti React Native. Chcete-li se seznámit s nastavením pracovního stroje, můžete použijte oficiální pokyny.

Potřebujeme tyto verze softwarových nástrojů:

Uzel v10.15.0
npm 6.4.1
příze 1.16.0
reaktivní 0.59.9
reagovat-nativní-lokalizovat 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í respond-native-cli. Chcete-li to provést, musíte v terminálu zadat toto:

$ reakt-native init multiLanguage
$ cd vícejazyčný

Přidání požadovaných knihoven

Prvním krokem je nainstalovat response-native-localize zadáním následujícího:
$ yarn add reakt-nativní-lokalizovat

Pokud se během procesu instalace setkáte s problémy, podívejte se na instalační manuál.

Knihovna reakt-native-localize poskytuje vývojářům přístup k vícejazyčným funkcím. Ale potřebuje jinou knihovnu - i18n.

Článek popisuje použití I18n.js za účelem zajištění překladu v JavaScriptu.

$ příze přidat i18n-js

Protože i18n-js neposkytuje ukládání do mezipaměti ani ukládání do paměti, doporučuji k tomu použít lodash.memoize:

$ yarn add lodash.memoize

Práce s překlady

Aby aplikace fungovala s jinými jazyky, musíte nejprve vytvořit adresář překladů uvnitř src a poté tři soubory JSON pro každý z 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 pro každý jazyk stejný. Používá jej aplikace k zobrazení textových informací.

Hodnota (hodnota) je text, který musí být zobrazen uživateli.

Angličtina:

{ "ahoj": "Ahoj světe!"}

francouzský

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

Арабский

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

Ostatní jazyky lze přidat stejným způsobem.

Hlavní kód

V tomto okamžiku musíte otevřít soubor App.js a přidat do něj 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";

Poté se přidají pomocné funkce a konstanty, které se budou hodit později.

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

Nyní vytvoříme komponentu třídy 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
  }
});

První prvek, setI18nConfig(), nastavuje počáteční konfiguraci.

Pak musíme přidat posluchač událostí do componentDidMount() , tento prvek bude naslouchat aktualizacím a zavolá handleLocalizationChange(), když k nim dojde.

Metoda handleLocalizationChange() vyvolá setI18nConfig() a forceUpdate(). To je nutné pro zařízení Android, protože komponenta musí být vykreslena, aby se změny projevily.

Poté musíme odstranit posluchač z metody componentWillUnmount().

Nakonec se v render() vrátí hello pomocí translate() a přidáním klíčového parametru. Po těchto krocích bude aplikace schopna „porozumět“, jaký jazyk je potřeba, a zobrazovat zprávy v něm.

Spuštění aplikace

Nyní je čas zkontrolovat, jak překlad funguje.

Nejprve spustíme aplikaci v simulátoru nebo emulátoru psaním

$ reaktivních run-ios
$ reakt-native run-android

Bude to vypadat asi takto:

Nyní můžete zkusit změnit jazyk na francouzštinu spuštěním aplikace.

Totéž děláme s arabským jazykem, není v tom žádný rozdíl.

Zatím se vše daří.

Co se ale stane, když vyberete náhodný jazyk, který v aplikaci nemá překlad?

Ukazuje se, že úkolem findBestLanguage je poskytnout nejlepší možný překlad ze všech dostupných. V důsledku toho se zobrazí jazyk, který byl nastaven jako výchozí.

Je to o nastavení telefonu. Takže například v emulátoru iOS vidíte pořadí jazyků.

Pokud vybraný jazyk není preferovaným jazykem, funkce findBestAvailableLanguage vrátí hodnotu nedefinovaná, takže se zobrazí výchozí jazyk.

prémie

React-native-localize má API, které poskytuje přístup k velkému počtu jazykových prvků. Před zahájením práce, stojí za to si přečíst dokumentaci.

Závěry

Aplikace může být bez problémů vícejazyčná. React-native-localize je skvělá možnost, která vám umožní rozšířit okruh uživatelů vaší aplikace.

Zdrojový kód projektu je tady.

Skillbox doporučuje:

Dvouletý praktický kurz "Jsem PRO webový vývojář".

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

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

Zdroj: www.habr.com

Píšeme vícejazyčnou aplikaci na React Native