Shkruajmë një aplikacion shumëgjuhësh në React Native

Lokalizimi i produkteve është shumë i rëndësishëm për kompanitë ndërkombëtare që po zgjerojnë aktivitetin e tyre në vende dhe regione të reja. Po ashtu, lokalizimi është i nevojshëm edhe për aplikacionet mobile. Nëse një zhvillues fillon një ekspansion ndërkombëtar, është e rëndësishme t'u japë përdoruesve nga një vend tjetër mundësinë për të punuar me ndërfaqen në gjuhën e tyre amtare. Në këtë artikel, do të krijojmë një aplikacion React Native, duke përdorur paketën react-native-localize.

Skillbox rekomandon: Kurs online edukativ «Profesia Java-zhvillues».
Kujtojmë: për të gjithë lexuesit e «Habra» — zbritje prej 10,000 rublesh për regjistrimin në çdo kurs Skillbox me kodin promovues «Habr».

Mjetet dhe aftësitë

Për të kuptuar këtë artikull, kërkohen aftësi bazë në punën me React Native. Për të njohur konfigurimin e makinës tuaj të punës, mund të përdorni udhëzimin zyrtar.

Na nevojiten versionet e mëposhtme të mjeteve softuerike:

• 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

Të fillojmë

Do të krijojmë një aplikacion që do të mbështesë gjuhët angleze, franceze dhe arabe. Së pari, krijojmë një projekt të ri duke përdorur react-native-cli. Për këtë, në terminal duhet të shkruani:

$ react-native init multiLanguage
$ cd multiLanguage

Shtojmë bibliotekat e nevojshme

Hapi i parë është të instaloni react-native-localize duke shtypur:
$ yarn add react-native-localize

Nëse hasni probleme gjatë instalimit, duhet të shqyrtoni manualin e instalimit.

Biblioteka react-native-localize i jep zhvilluesit akses në funksionet shumëgjuhëshe. Por ajo ka nevojë edhe për një bibliotekë tjetër — i18n.

Artikulli përshkruan përdorimin e I18n.js për të siguruar përkthimin në JavaScript.

$ yarn add i18n-js

Dhe pasi që i18n-js nuk ofron ruajtje ose memorizim, unë sugjeroj të përdorni lodash.memoize për këtë:

$ yarn add lodash.memoize

Puna me përkthimet

Për të bërë që aplikacioni të punojë me gjuhë të tjera, së pari duhet të krijoni një katalog translations brenda src, pastaj — tre skedarë JSON, për secilën nga gjuhët.

1. en.json për anglisht;

2. fr.json për frëngjisht;

3. ar.json për arabisht.

Këta skedarë përmbajnë objekte JSON me çelësa dhe vlera. Çelësi do të jetë i njëjtë për çdo gjuhë. Ai përdoret nga aplikacioni për të shfaqur informacionin tekstual.

Vlera (value) — është teksti që duhet të shfaqet për përdoruesin.

Gjuha angleze:

{ "hello": "Hello World!"}

Frëngjisht

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

Arabisht

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

Në mënyrë të ngjashme, mund të shtoni edhe gjuhë të tjera.

Kodi kryesor

Në këtë etapë, duhet të hapni skedarin App.js dhe të shtoni importin:

import React from "react";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";
import memoize from "lodash.memoize"; // Përdor për ruajtjen e të dhënave të përkohshme / memoizimin për performancë më të mirë

import {
  I18nManager,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View
} from "react-native";

Pas kësaj, shtohen funksione dhe constante ndihmëse që do të jenë të dobishme më vonë.

const translationGetters = {
  // kërkesa të ngadalta (metro bundler nuk mbështet symlink)
  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 = () => {
  // mbështetje nëse nuk ka gjuhë të disponueshme
  const fallback = { languageTag: "en", isRTL: false };

  const { languageTag, isRTL } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
    fallback;

  // pastrimi i cache-it të përkthimeve
  translate.cache.clear();
  // përditësimi i drejtimit të layotit
  I18nManager.forceRTL(isRTL);
  // vendosja e konfigurimit të i18n-js
  i18n.translations = { [languageTag]: translationGetters[languageTag]() };
  i18n.locale = languageTag;
};

Tani le të krijojmë komponentin e klasës App:

export default class App extends React.Component {
  constructor(props) {
    super(props);
    setI18nConfig(); // vendosja e konfigurimit fillestar
  }

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

Elementi i parë — setI18nConfig() — vendos konfigurimin fillestar.

Më pas, në componentDidMount() duhet të shtohet dëgjimi i ngjarjeve, ky element do të ndjekë përditësimet dhe do të thërrasë handleLocalizationChange() në rastet kur ato ndodhin.

Metoda handleLocalizationChange() aktivizon setI18nConfig() dhe forceUpdate(). Kjo është e nevojshme për pajisjet Android, pasi komponenti duhet të renderohet që ndryshimet të bëhen të dukshme.

Më pas duhet të hiqet dëgjimi nga metoda componentWillUnmount().

Në fund, në render() kthehet hello duke përdorur translate() dhe duke i shtuar parametrin key. Pas këtyre veprimeve, aplikacioni do të jetë në gjendje të "kuptojë" se cila gjuhë është e nevojshme dhe të tregojë mesazhet në atë gjuhë.

Fillimi i aplikacionit

Tani është koha të verifikojmë se si funksionon përkthimi.

Fillimisht, ne e nisim aplikacionin në simulator ose emulator, duke shkruar

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

Do të duket përafërsisht kështu:

Tani mund të provoni të ndryshoni gjuhën në frëngjisht, duke e nisur më pas aplikacionin.

Me gjuhën arabe bëjmë të njëjtën gjë, nuk ka ndonjë ndryshim.

Derisa gjithçka shkon mirë.

Por çfarë do të ndodhë nëse zgjidhni një gjuhë të rastësishme, për të cilën nuk ka përkthim në aplikacion?

Duket se detyra findBestLanguage është të sigurojë përkthimin optimal nga të gjithë në dispozicion. Si rezultat, do të shfaqet gjuha që është vendosur si e parazgjedhur.

Është fjala për cilësimet e telefonit. Për shembull, në emulatorin e iOS mund të shihni rendin e gjuhëve.

Nëse gjuha e zgjedhur nuk është e preferuar, findBestAvailableLanguage kthen undefined, kështu që shfaqet gjuha që është vendosur si e parazgjedhur.

Bonusi

Reagimi-native-localize ka një API që ofron qasje në një sërë të gjerë të elementeve gjuhësore. Para se të filloni punën, është e rëndësishme të shqyrtoni dokumentacionin.

Përfundimet

Aplikacioni mund të bëhet shumëgjuhësh pa ndonjë problem të madh. Reagimi-native-localize është një mundësi e shkëlqyer që lejon zgjerimin e kllapës së përdoruesve të aplikacionit.

Kodi burimor i projektit ndodhet këtu.

Skillbox rekomandon:

• Kursi praktik dyvjeçar «Unë jam zhvillues web PRO».
• Kurs online «Zhvillues C# nga e para».
• Kurs praktik njëvjeçar «Zhvillues PHP nga 0 në PRO».

Burimi: habr.com