Създаваме многоезично приложение на 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 и да добавите в него импорт:

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

импортируйте {
  I18nManager,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View
} из "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:

експортирайте по подразбиране клас App extends React.Component {
  конструктор(пропси) {
    суперклас(пропси);
    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() и добавяне на параметър ключ. След тези действия приложението ще може да "разбира", кой език е необходим и да показва съобщенията именно на него.

Стартиране на приложението

Сега е време да проверим как работи преводът.

Първо стартирайте приложението в симулатора или емулатора, като напишете

$ 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