🥇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 shkelin në vende dhe rajone të reja. Po ashtu, lokalizimi është i nevojshëm edhe për aplikacionet mobile. Kur një zhvillues fillon shtrirjen ndërkombëtare, është e rëndësishme t'u ofrojë 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ë artikull, do të krijojmë një aplikacion React Native duke përdorur paketën react-native-localize.

Skillbox rekomandon: Kurs online edukativ «Profesioni Java-developer».
Kujtojmë: për të gjithë lexuesit e "Habra" — zbritje prej 10,000 rublej për regjistrimin në çdo kurs Skillbox me kodin promocional "Habr".

Mjetet dhe aftësitë

Për të kuptuar këtë artikull, nevojiten aftësi bazike në punën me React Native. Për të njohur konfigurimet e makinerisë tuaj, mund të shfrytëzoni udhëzimin zyrtar.

Na nevojiten këto versione të mjeteve software:

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

Fillojmë

Do të krijojmë një aplikacion që do të mbështesë anglishten, frëngjishten dhe arabishten. Fillimisht do të 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

Së pari, na nevojitet të instalojmë react-native-localize duke shkruar këtë:
$ yarn add react-native-localize

Nëse gjatë instalimit hasni probleme, është e rëndësishme të studiohet manuali i instalimit.

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

Ky artikull përshkruan përdorimin I18n.js për të siguruar përkthimin në JavaScript.

$ yarn add i18n-js

Dhe, pasi i18n-js nuk ofron caching ose memoization, unë sugjeroj të përdorim lodash.memoize për këtë:

$ yarn add lodash.memoize

Puna me përkthime

Për të lejuar aplikacionin të punojë me gjuhë të tjera, së pari duhet të krijoni një katalog translations brenda src, pastaj — tre skedare 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ëto skedare 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ëngjishtja

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

Arabisht

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

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

Kodi kryesor

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

import React from "react";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";
import memoize from "lodash.memoize"; // Përdorimi për caching/memoize për performancë më të mirë
 
import {
  I18nManager,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View
} from "react-native";

Më pas, shtohen funksionet ndihmëse dhe konstantet 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 = () => {
  // rënia në rast se asnjë gjuhë e disponueshme nuk përshtatet
  const fallback = { languageTag: "en", isRTL: false };
 
  const { languageTag, isRTL } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
    fallback;
 
  // pastro cache-n e përkthimit
  translate.cache.clear();
  // përditëso drejtimin e layout-it
  I18nManager.forceRTL(isRTL);
  // vendos konfigurimin e 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(); // vendos konfigurimin 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.

Pastaj në componentDidMount() duhet shtuar dëgjimi i ngjarjeve; ky element do të monitorojë përditësimet dhe do të thërrasë handleLocalizationChange() në rast se ato ndodhin.

Metoda handleLocalizationChange() aktivizon setI18nConfig() dhe forceUpdate(). Kjo është e nevojshme për pajisjet Android, pasi komponenti duhet të rrihet për t'u renditur 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 shtuar atij parametrin key. Pas këtyre veprimeve, aplikacioni do të jetë në gjendje të 'kuptojë' se cila gjuhë kërkohet dhe të shfaqë mesazhet në atë gjuhë.

Ekzekutimi i aplikacionit

Tani është koha për të provuar si funksionon përkthimi.

Fillimisht, lanisni aplikacionin në simulator ose emulator duke shkruar

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

Kjo do të duket më pak kështu:

Tani mund të provoni të ndryshoni gjuhën në frëngjisht dhe pastaj të nisni aplikacionin.

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

Deri tani gjithçka po shkon mirë.

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

Duket se detyra e findBestLanguage është të ofrojë përkthimin optimal midis të gjitha përkthimeve të disponueshme. Si rezultat, do të shfaqet gjuha që është vendosur si e paracaktuar.

Kjo lidhet me cilësimet e telefonit. Për shembull, në emulatorin iOS mund të shihni rendin e gjuhëve.

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

Bonus

React-native-localize ka një API që ofron qasje në një sasi të madhe elementësh gjuhësor. Para se të filloni punën, duhet të shqyrtoni dokumentacionin.

Përfundimet

Aplikacioni mund të bëhet shumëgjuhësh pa shumë probleme. React-native-localize është një variant i shkëlqyer që lejon zgjerimin e audiencës së aplikacionit.

Kodi burimor i projektit ndodhet këtu.

Skillbox rekomandon:

Kurs praktik dyvjeçar «Unë jam zhvillues web PRO».

Kurs online «Programues C# nga zero».

Kurs praktik njëvjeçar «PHP zhvillues nga 0 në PRO».

Burimi: habr.com

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