Пішам мультымоўнае дадатак на React Native

Лакалізацыя прадукцыі вельмі важная для міжнародных кампаній, якія асвойваюць новыя для сябе краіны і рэгіёны. Аналагічна лакалізацыя патрэбна і мабільным прыкладанням. Калі распрацоўшчык пачынае міжнародную экспансію, важна даць карыстальнікам з іншай краіны магчымасць працаваць з інтэрфейсам на роднай мове. У гэтым артыкуле мы створым прыкладанне React Native, выкарыстоўваючы пакет react-native-localize.

Skillbox рэкамендуе: Адукацыйны анлайн-курс «Прафесія Java-распрацоўшчык».
Нагадваем: для ўсіх чытачоў "Хабра" - зніжка 10 000 рублёў пры запісе на любы курс Skillbox па промакодзе "Хабр".

Інструменты і навыкі

Для разумення гэтага артыкула патрэбныя базавыя навыкі працы з React Native. Для азнаямлення з наладамі працоўнай машыны можна скарыстацца афіцыйнай інструкцыяй.

Нам спатрэбяцца вось такія версіі праграмных прылад:

• 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

Пачынаем

Мы створым дадатак, якое будзе падтрымліваць англійскую, французскую і арабскую мовы. Спачатку ствараем новы праект, выкарыстоўваючы react-native-cli. Для гэтага ў тэрмінале трэба набраць вось што:

$ react-native init multiLanguage
$ cd multiLanguage

Дадаем неабходныя бібліятэкі

Перш за ўсё трэба ўсталяваць react-native-localize, набраўшы наступнае:
$ yarn add react-native-localize

Калі ў працэсе ўстаноўкі ўзнікаюць праблемы, варта вывучыць мануал па ўстаноўцы.

Бібліятэка react-native-localize дае распрацоўніку доступ да мультымоўных функцый. Але ёй патрэбна яшчэ адна бібліятэка – i18n.

У артыкуле апісваецца выкарыстанне I18n.js для таго, каб забяспечыць перавод у JavaScript.

$ yarn add i18n-js

Ну а паколькі i18n-js не падае кэшавання ці мемоізацыі, я прапаную выкарыстоўваць для гэтага lodash.memoize:

$ yarn add lodash.memoize

Праца з перакладамі

Для таго, каб прыкладанне ўмела працаваць і з іншымі мовамі, спачатку трэба стварыць каталог translations усярэдзіне src, потым — тры файла JSON, для кожнай з моў.

1. en.json для ангельскай;

2. fr.json для французскага;

3. ar.json для арабскага.

Гэтыя файлы змяшчаюць аб'екты JSON з ключамі і значэннямі. Ключ будзе адзін і той жа для кожнай мовы. Ён выкарыстоўваецца дадаткам для адлюстравання тэкставай інфармацыі.

Значэнне (value) - гэта тэкст, які трэба паказваць карыстачу.

Англійская мова:

{hello: Hello World!}

Французская

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

Арабская

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

Аналагічнай выявай можна дадаваць і іншыя мовы.

Асноўны код

На гэтым этапе трэба адкрыць файл App.js і дадаць у яго імпарт:

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

Ну а зараз створым кампанент класа 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
  }
});

Першы элемент - setI18nConfig() - усталёўвае пачатковую канфігурацыю.

Затым у componentDidMount() трэба дадаць праслухоўванне падзей, гэты элемент будзе адсочваць абнаўлення і выклікаць handleLocalizationChange() у тым выпадку, калі яны адбываюцца.

Метад handleLocalizationChange() актывізуе setI18nConfig() і forceUpdate(). Гэта неабходна для прылад на Android, бо кампанент павінен быць адрэндэрны, каб змены сталі прыкметнымі.

Затым трэба прыбраць праслухоўванне з метаду componentWillUnmount().

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

запуск прыкладання

Цяпер самы час праверыць, як працуе пераклад.

Спачатку запускаем дадатак у сімулятары або эмулятары, набіраючы

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

Выглядаць гэта будзе прыкладна так:

Цяпер можна паспрабаваць змяніць мову на французскую, запусціўшы затым прыкладанне.

З арабскай мовай вырабляе тое ж самае, розніцы няма.

Пакуль усё ідзе добра.

Але што адбудзецца, калі выбраць выпадковую мову, перакладу якой няма ў дадатку?

Аказваецца, задача findBestLanguage - прадастаўленне аптымальнага з усіх даступных перакладу. У выніку будзе адлюстроўвацца мова, якая была ўсталяваная па змаўчанні.

Размова ідзе аб настройках тэлефона. Так, напрыклад, у эмулятары iOS можна паглядзець парадак моў.

Калі абраная мова не з'яўляецца ўпадабанай, findBestAvailableLanguage вяртае undefined, так што паказваецца тая мова, які ўсталяваны па змаўчанні.

бонус

У react-native-localize ёсць API, якое дае доступ да вялікай колькасці моўных элементаў. Перад тым, як пачаць працу, варта азнаёміцца ​​з дакументацыяй.

Высновы

Прыкладанне можна зрабіць мультымоўным без асаблівых праблем. React-native-localize - выдатны варыянт, які дазваляе пашырыць круг карыстальнікаў прыкладання.

Зыходны код праекта знаходзіцца тут.

Skillbox рэкамендуе:

• Двухгадовы практычны курс «Я – вэб-распрацоўшчык PRO».
• Анлайн-курс «З#-распрацоўшчык з нуля».
• Практычны гадавы курс "PHP-распрацоўшчык з 0 да PRO".

Крыніца: habr.com