Пишување повеќејазична апликација во React Native

Локализацијата на производите е многу важна за меѓународните компании кои истражуваат нови земји и региони. Слично на тоа, потребна е локализација за мобилните апликации. Ако програмерот започне меѓународно проширување, важно е да им се даде можност на корисниците од друга земја да работат со интерфејсот на нивниот мајчин јазик. Во оваа статија, ќе создадеме апликација React Native користејќи го пакетот реагира-мајчин-локализира.

Skillbox препорачува: Едукативен онлајн курс „Професија Java програмер“.
Потсетуваме: за сите читатели на „Хабр“ - попуст од 10 рубли при запишување на кој било курс Skillbox користејќи го промотивниот код „Хабр“.

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

За да ја разберете оваа статија, потребни ви се основни вештини за работа со 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 со внесување на следново:
$ предиво додадете реагира-мајчин-локализирај

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

Библиотеката react-native-localize му дава на развивачот пристап до повеќејазични функции. Но, ѝ треба уште една библиотека - i18n.

Оваа статија ја опишува употребата I18n.js со цел да се обезбеди превод на JavaScript.

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

Па, бидејќи i18n-js не обезбедува кеширање или мемоизација, предлагам да го користите lodash.memoize за ова:

$ предиво додадете lodash.memoize

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

За да може апликацијата да работи со други јазици, прво треба да креирате директориум за преводи во src, а потоа три JSON-датотеки за секој јазик.

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

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

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

Овие датотеки содржат JSON објекти со клучеви и вредности. Клучот ќе биде ист за секој јазик. Се користи од апликацијата за прикажување на текстуални информации.

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

Англиски:

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

Французский

{"здраво": "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().

Конечно, render() враќа hello со користење на 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