Писање вишејезичне апликације у Реацт Нативе-у

Локализација производа је веома важна за међународне компаније које истражују нове земље и регионе. Слично, локализација је потребна за мобилне апликације. Ако програмер започне међународну експанзију, важно је дати корисницима из друге земље прилику да раде са интерфејсом на свом матерњем језику. У овом чланку ћемо креирати Реацт Нативе апликацију користећи пакет реаговати-нативе-лоцализе.

Скиллбок препоручује: Образовни онлајн курс „Професија Јава програмер“.
Подсећамо: за све читаоце „Хабра“ – попуст од 10 рубаља при упису на било који курс Скиллбок користећи промотивни код „Хабр“.

Алати и вештине

Да бисте разумели овај чланак, потребне су вам основне вештине у раду са Реацт Нативе. Да бисте се упознали са подешавањима радне машине, можете користите званична упутства.

Биће нам потребне ове верзије софтверских алата:

• Ноде в10.15.0
• нпм 6.4.1
• предиво 1.16.0
• реацт-нативе 0.59.9
• реаговати-нативе-лоцализе 1.1.3
• и18н-јс 3.3.0

Геттинг стартед

Направићемо апликацију која ће подржавати енглески, француски и арапски језик. Прво креирамо нови пројекат користећи реацт-нативе-цли. Да бисте то урадили, морате да укуцате ово у терминалу:

$ реацт-нативе инит вишејезички
$ цд вишејезични

Додавање потребних библиотека

Први корак је да инсталирате реацт-нативе-лоцализе тако што ћете откуцати следеће:
$ иарн адд реацт-нативе-лоцализе

Ако дође до проблема током процеса инсталације, Вреди прочитати упутство за инсталацију.

Реацт-нативе-лоцализе библиотека даје програмеру приступ вишејезичним функцијама. Али треба јој још једна библиотека - и18н.

Овај чланак описује употребу И18н.јс како би се обезбедио превод у ЈаваСцрипт.

$ предиво додати и18н-јс

Па, пошто и18н-јс не обезбеђује кеширање или меморисање, предлажем да користите лодасх.мемоизе за ово:

$ иарн адд лодасх.мемоизе

Рад са преводима

Да би апликација могла да ради са другим језицима, прво треба да креирате директоријум превода унутар срц-а, затим три ЈСОН датотеке за сваки језик.

1. ен.јсон за енглески;

2. фр.јсон за француски;

3. ар.јсон за арапски.

Ове датотеке садрже ЈСОН објекте са кључевима и вредностима. Кључ ће бити исти за сваки језик. Апликација га користи за приказ текстуалних информација.

Вредност је текст који треба да се прикаже кориснику.

Енглески језик:

{"здраво": "Здраво свет!"}

Французскии

{"здраво": "Салут ле Монде!"}

Арабскии

{ "здраво": "اهلا بالعالم"}

На исти начин можете додати и друге језике.

Главни код

У овом тренутку, потребно је да отворите Апп.јс датотеку и додате јој увозе:

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

Након тога се додају помоћне функције и константе које ће касније бити корисне.

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

Па, хајде да сада направимо компоненту класе Апп:

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

Први елемент, сетИ18нЦонфиг(), поставља почетну конфигурацију.

Затим морате да додате слушалац догађаја компонентиДидМоунт(), овај елемент ће слушати ажурирања и позвати хандлеЛоцализатионЦханге() када се догоде.

Метода хандлеЛоцализатионЦханге() активира сетИ18нЦонфиг() и форцеУпдате(). Ово је неопходно за Андроид уређаје јер компонента мора бити приказана да би промене биле приметне.

Затим морате уклонити слушање из методе цомпонентВиллУнмоунт().

Коначно, рендер() враћа хелло коришћењем транслате() и додавањем кључног параметра у њега. Након ових корака, апликација ће моћи да „разуме“ који језик је потребан и прикаже поруке на њему.

Покретање апликације

Сада је време да проверите како превод функционише.

Прво покрећемо апликацију у симулатору или емулатору куцањем

$ реацт-нативе рун-иос
$ реацт-нативе рун-андроид

Изгледаће отприлике овако:

Сада можете покушати да промените језик у француски тако што ћете покренути апликацију.

Исто радимо и са арапским, нема разлике.

Засада је добро.

Али шта се дешава ако изаберете случајни језик за који у апликацији нема превода?

Испоставило се да је задатак финдБестЛангуаге да обезбеди оптималан превод од свих доступних. Као резултат, биће приказан подразумевани језик.

Говоримо о подешавањима телефона. На пример, у иОС емулатору можете видети редослед језика.

Ако изабрани језик није жељени језик, финдБестАваилаблеЛангуаге враћа недефинисан тако да се приказује подразумевани језик.

Бонус

реацт-нативе-лоцализе има АПИ који омогућава приступ великом броју језичких елемената. Пре него што почнете са радом, Вреди погледати документацију.

Налази

Апликација се може учинити вишејезичном без икаквих проблема. Реацт-нативе-лоцализе је одлична опција која вам омогућава да проширите базу корисника ваше апликације.

Изворни код пројекта је овде.

Скиллбок препоручује:

• Двогодишњи практични курс „Ја сам ПРО веб програмер“.
• Онлајн курс „Ц# програмер од нуле“.
• Практична година курса „ПХП програмер од 0 до ПРО“.

Извор: ввв.хабр.цом