Pisanje večjezične aplikacije v React Native

Lokalizacija izdelkov je zelo pomembna za mednarodna podjetja, ki vstopajo na nova območja in regije. Prav tako je potrebna lokalizacija za mobilne aplikacije. Če razvijalec začne svojo mednarodno širitev, je ključno, da uporabnikom iz drugih držav omogoči uporabo vmesnika v njihovem jeziku. V tem članku bomo ustvarili aplikacijo React Native z uporabo paketa react-native-localize.

Skillbox priporoča: Образовательный онлайн-курс «Профессия Java-разработчик».
Opominjamo: za vse bralce »Habra« — popust 10 000 rubljev ob vpisu na kateri koli tečaj Skillbox s promo kodo »Habr«.

Orodja in veščine

Za razumevanje tega članka so potrebne osnovne veščine dela z React Native. Za seznanitev z nastavitvami delovne postaje lahko izkoristite uradna navodila.

Potrebovali bomo naslednje različice programske opreme:

• 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čnemo

Ustvarili bomo aplikacijo, ki bo podpirala angleščino, francoščino in arabščino. Najprej ustvarimo nov projekt z uporabo react-native-cli. V terminalu vnesite naslednje:

$ react-native init multiLanguage
$ cd multiLanguage

Dodajamo potrebne knjižnice

Najprej je treba namestiti react-native-localize, tako da vnesete naslednje:
$ yarn add react-native-localize

Če se med namestitvijo pojavijo težave, je smiselno pregledati navodila za namestitev.

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

V članku je opisano, kako uporabiti I18n.js da zagotovi prevod v JavaScriptu.

$ yarn add i18n-js

Ker i18n-js ne ponuja funkcij za predpomnjenje ali memoizacijo, predlagam, da za to uporabite lodash.memoize:

$ yarn add lodash.memoize

Delo s prevodi

Da bo aplikacija znala delati tudi z drugimi jeziki, morate najprej ustvariti katalog translations znotraj src, nato pa ustvariti 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 JSON objekte s ključi in vrednostmi. Ključ bo enak za vsak jezik. Aplikacija ga uporablja za prikazovanje besedilnih informacij.

Vrednost (value) je besedilo, ki ga je treba prikazati uporabniku.

Angleščina:

{ "hello": "Hello World!"}

Francoščina

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

Arabščina

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

Na podoben način lahko dodate tudi druge jezike.

Osnovna koda

V tej fazi je treba odpreti datoteko App.js in nanjo dodati uvoz:

import React from "react";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";
import memoize from "lodash.memoize"; // Используйте для кэширования / мемоизации для лучшей производительности

import {
  I18nManager,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View
} from "react-native";

После этого добавляются вспомогательные функции и константы, которые пригодятся впоследствии.

const translationGetters = {
  // ленивые импорты (metro bundler не поддерживает симлинки)
  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 = () => {
  // резервный вариант, если ни один доступный язык не подходит
  const fallback = { languageTag: "en", isRTL: false };

  const { languageTag, isRTL } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
    fallback;

  // очистить кэш переводов
  translate.cache.clear();
  // обновить направление компоновки
  I18nManager.forceRTL(isRTL);
  // установить конфигурацию i18n-js
  i18n.translations = { [languageTag]: translationGetters[languageTag]() };
  i18n.locale = languageTag;
};

Теперь создадим компонент класса App:

export default class App extends React.Component {
  constructor(props) {
    super(props);
    setI18nConfig(); // установить начальную конфигурацию
  }

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

Первый элемент — setI18nConfig() — устанавливает начальную конфигурацию.

Затем в componentDidMount() нужно добавить прослушивание событий, которое будет отслеживать обновления и вызывать handleLocalizationChange(), когда они происходят.

Метод handleLocalizationChange() активирует setI18nConfig() и forceUpdate(). Это необходимо для устройств на Android, так как компонент должен быть отрендерен, чтобы изменения стали заметными.

Затем нужно убрать прослушивание в методе componentWillUnmount().

Наконец, в render() возвращается 'hello' с помощью translate() и параметра key. После этих действий приложение сможет «понимать», какой язык нужно использовать, и показывать сообщения именно на нем.

Запуск приложения

Теперь самое время проверить, как работает перевод.

Сначала запускаем приложение в симуляторе или эмуляторе, набирая

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

Выглядеть это будет примерно так:

Sedaj lahko poskusite spremeniti jezik v francoščino, nato pa zaženete aplikacijo.

Z arabskim jezikom delamo enako, razlike ni.

Zaenkrat gre vse dobro.

Kaj pa se zgodi, če izberete naključni jezik, za katerega v aplikaciji ni prevoda?

Izkazalo se je, da naloga findBestLanguage — da zagotovi optimalen prevod iz vseh razpoložljivih. V rezultatu se bo prikazal privzeti jezik.

Govori se o nastavitvah telefona. Tako lahko v emulatorju iOS pogledate vrstni red jezikov.

Če izbrani jezik ni prednostni, findBestAvailableLanguage vrne undefined, tako da se prikaže tisti jezik, ki je nastavljen kot privzet.

Bonusp

React-native-localize ima API, ki omogoča dostop do številnih jezikovnih elementov. Preden začnete delati, bi se bilo dobro seznaniti z dokumentacijo..

Zaključki

Aplikacijo lahko brez težav naredite večjezično. React-native-localize je odlična izbira, ki omogoča širitev kroga uporabnikov aplikacije.

Izvorna koda projekta je tukaj.

Skillbox priporoča:

• Двухлетний практический курс «Я — веб-разработчик PRO».
• Spletni tečaj „C# razvijalec od nič“.
• Практический годовой курс «PHP-разработчик с 0 до PRO».

Izvor: habr.com