Създаваме многоезично приложение с 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 от "react";
import * as RNLocalize от "react-native-localize";
import i18n от "i18n-js";
import memoize от "lodash.memoize"; // Използвайте за кеширане/мемоизиране за по-добра производителност
 
import {
  I18nManager,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View
} от "react-native";

След това се добавят помощни функции и константи, които ще бъдат полезни по-късно.

const translationGetters = {
  // мързеливи изисквания (метро bundler не поддържа 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 = () => {
  // резервен вариант, ако няма наличен език
  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

Това ще изглежда приблизително така:

Сега можете да опитате да смените езика на френски, след което да стартирате приложението.

С арабския език правим същото, разлика няма.

Досега всичко върви добре.

Но какво ще се случи, ако изберете случайния език, за който няма превод в приложението?

Оказва се, че задачата findBestLanguage е да предостави оптималния от всички налични превод. В резултат ще се показва езикът, който е зададен по подразбиране.

Става въпрос за настройките на телефона. Например, в iOS емулатора можете да видите реда на езиците.

Ако избраният език не е предпочитан, findBestAvailableLanguage връща undefined, така че ще се показва езикът, който е зададен по подразбиране.

Бонус

react-native-localize разполага с API, което предоставя достъп до голямо количество езикови елементи. Преди да започнете работа, добре е да се запознаете с документацията.

Изводи

Приложението може да бъде направено многоезично без особени трудности. React-native-localize е отличен вариант, който позволява да разширите кръга на потребителите на приложението.

Изходният код на проекта се намира тук.

Skillbox препоръчва:

• Двугодишен практически курс «Аз съм уеб разработчик PRO».
• Онлайн курс «C# разработчик от нулата».
• Практически годишен курс «PHP разработчик от 0 до PRO».

Източник: habr.com