Ние пишем многоезично приложение на React Native

Локализацията на продуктите е много важна за международните компании, които развиват нови страни и региони. По същия начин е необходима локализация за мобилни приложения. Ако разработчик започне международна експанзия, важно е да се даде възможност на потребителите от друга държава да работят с интерфейса на родния си език. В тази статия ще създадем приложение React Native, използвайки пакета реагират-нативно-локализират.

Skillbox препоръчва: Образователен онлайн курс „Професия Java разработчик“.
Напомняме ви: за всички читатели на "Habr" - отстъпка от 10 000 рубли при записване във всеки курс Skillbox, използвайки промоционалния код на "Habr".

Инструменти и умения

Разбирането на тази статия изисква основни умения за React Native. За да се запознаете с настройките на работещата машина, можете използвайте официални инструкции.

Имаме нужда от тези версии на софтуерни инструменти:

• Възел v10.15.0
• npm 6.4.1
• прежда 1.16.0
• реагира-роден 0.59.9
• реакция-роден-локализиране 1.1.3
• i18n-js 3.3.0

Първи стъпки

Ще създадем приложение, което ще поддържа английски, френски и арабски. Първо създаваме нов проект, използвайки react-native-cli. За да направите това, в терминала трябва да въведете това:

$ react-native init multiLanguage
$ cd многоезичен

Добавяне на необходимите библиотеки

Първата стъпка е да инсталирате react-native-localize, като напишете следното:
$ yarn add react-native-localize

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

Библиотеката react-native-localize дава на разработчика достъп до многоезични функции. Но тя се нуждае от друга библиотека - i18n.

Статията описва употребата I18n.js за да осигурите превод в JavaScript.

$ прежда добавете i18n-js

Е, тъй като i18n-js не осигурява кеширане или мемоизация, предлагам да използвате lodash.memoize за това:

$ yarn add lodash.memoize

Работа с преводи

За да може приложението да работи с други езици, първо трябва да създадете директория за преводи в src, след това три JSON файла за всеки от езиците.

1. en.json за английски;

2. fr.json за френски;

3. ar.json за арабски.

Тези файлове съдържат JSON обекти с ключове и стойности. Ключът ще бъде един и същ за всеки език. Използва се от приложението за показване на текстова информация.

Стойност (стойност) е текстът, който трябва да бъде показан на потребителя.

Английски:

{ "hello": "Здравей свят!"}

Французский

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

Арабский

{ "здравей": "أهلاً بالعالم"}

Други езици могат да се добавят по същия начин.

Основен код

В този момент трябва да отворите файла 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().

И накрая, hello се връща в render() чрез използване на translate() и добавяне на ключов параметър към него. След тези стъпки приложението ще може да „разбере“ кой език е необходим и да показва съобщения на него.

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

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

Първо стартираме приложението в симулатора или емулатора чрез въвеждане

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

Ще изглежда нещо подобно:

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

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

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

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

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

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

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

премия

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

Данни

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

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

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

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

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