🥇Scriem o aplicație multilingvă pe React Native

Localizarea produselor este foarte importantă pentru companiile internaționale care explorează noi țări și regiuni. De asemenea, localizarea este necesară și pentru aplicațiile mobile. Când un dezvoltator începe expansiunea internațională, este crucial să ofere utilizatorilor din alte țări posibilitatea de a interacționa cu interfața în limba lor natală. În acest articol, vom crea o aplicație React Native folosind pachetul react-native-localize.

Skillbox recomandă: Curs online educațional «Profesie Java Developer».
Vă reamintim: pentru toți cititorii „Habr” — reducere de 10.000 de ruble la înscrierea la orice curs Skillbox cu codul de promovare „Habr”.

Instrumente și abilități

Pentru a înțelege acest articol, sunt necesare abilități de bază în utilizarea React Native. Pentru a consulta setările mașinii de lucru, puteți folosi ghidul oficial.

Vom avea nevoie de următoarele versiuni ale instrumentelor 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

Începem

Vom crea o aplicație care va suporta limbile engleză, franceză și arabă. Mai întâi, creăm un nou proiect folosind react-native-cli. Pentru aceasta, în terminal trebuie să introducem următoarele:

$ react-native init multiLanguage
$ cd multiLanguage

Adăugăm bibliotecile necesare

Primul pas este să instalăm react-native-localize, introducând următorul lucru:
$ yarn add react-native-localize

Dacă apar probleme în timpul instalării, ar trebui să consultați manualul de instalare.

Biblioteca react-native-localize oferă dezvoltatorului acces la funcții multilingve. Dar mai are nevoie de o altă bibliotecă - i18n.

Articolul descrie utilizarea I18n.js pentru a asigura traducerea în JavaScript.

$ yarn add i18n-js

Și deoarece i18n-js nu oferă caching sau memoization, vă propun să folosim lodash.memoize pentru aceasta:

$ yarn add lodash.memoize

Lucrul cu traducerile

Pentru ca aplicația să funcționeze și cu alte limbi, trebuie mai întâi să creăm un catalog translations în interiorul src, apoi trei fișiere JSON, pentru fiecare dintre limbi.

1. en.json pentru engleză;

2. fr.json pentru franceză;

3. ar.json pentru arabă.

Aceste fișiere conțin obiecte JSON cu chei și valori. Cheia va fi aceeași pentru fiecare limbă. Aceasta este folosită de aplicație pentru a afișa informațiile textuale.

Valoarea (value) este textul care trebuie afișat utilizatorului.

Limba engleză:

{ "hello": "Hello World!"}

Franceză

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

Arabă

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

În mod similar, pot fi adăugate și alte limbi.

Codul principal

În acest stadiu, trebuie să deschidem fișierul App.js și să adăugăm în el importul:

import React from "react";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";
import memoize from "lodash.memoize"; // Folosit pentru caching/memoization pentru o performanță mai bună
 
import {
  I18nManager,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View
} from "react-native";

Apoi se adaugă funcții și constante de asistență, care vor fi utile ulterior.

const translationGetters = {
  // necesități leneșe (metro bundler nu suportă 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 dacă nu există vreo limbă disponibilă potrivită
  const fallback = { languageTag: "en", isRTL: false };
 
  const { languageTag, isRTL } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
    fallback;
 
  // curăță cache-ul de traducere
  translate.cache.clear();
  // actualizează direcția de layout
  I18nManager.forceRTL(isRTL);
  // setează configurația i18n-js
  i18n.translations = { [languageTag]: translationGetters[languageTag]() };
  i18n.locale = languageTag;
};

Acum să creăm componenta clasei App:

export default class App extends React.Component {
  constructor(props) {
    super(props);
    setI18nConfig(); // setează configurația inițială
  }
 
  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
  }
});

Primul element — setI18nConfig() — stabilește configurația inițială.

Apoi, în componentDidMount() trebuie să adăugăm un ascultător de evenimente; acest element va urmări actualizările și va apela handleLocalizationChange() în cazul în care acestea au loc.

Metoda handleLocalizationChange() activează setI18nConfig() și forceUpdate(). Acest lucru este necesar pentru dispozitivele Android, deoarece componenta trebuie să fie redată pentru ca modificările să devină evidente.

Apoi, trebuie să eliminăm ascultătorul din metoda componentWillUnmount().

În final, în render() se returnează hello prin utilizarea translate() și adăugarea parametrului key. După aceste acțiuni, aplicația va putea „înțelege” ce limbă este necesară și va afișa mesajele corespunzătoare.

Rularea aplicației

Acum este momentul să verificăm cum funcționează traducerea.

Mai întâi, lansăm aplicația în simulator sau emulator, tastând

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

Va arăta cam așa:

Acum poți încerca să schimbi limba în franceză, apoi să lansezi aplicația.

Pentru limba arabă, procedăm la fel, nu există nicio diferență.

Până acum totul decurge bine.

Dar ce se va întâmpla dacă alegi o limbă aleatorie care nu este tradusă în aplicație?

Se pare că sarcina findBestLanguage este de a oferi cea mai bună traducere disponibilă. În consecință, va fi afișată limba setată ca implicit.

Este vorba despre setările telefonului. De exemplu, în emulatorul iOS poți verifica ordinea limbilor.

Dacă limba selectată nu este preferată, findBestAvailableLanguage returnează undefined, astfel că se va afișa limba care este setată ca implicit.

Bonus

React-native-localize are o API care oferă acces la un număr mare de elemente lingvistice. Înainte de a începe lucrul, ar fi bine să consulți documentația.

Conclusions

Aplicația poate fi făcută multilingvă fără probleme mari. React-native-localize este o opțiune excelentă care permite extinderea numărului de utilizatori ai aplicației.

Codul sursă al proiectului se află aici.

Skillbox recomandă:

Curs practic de doi ani „Sunt un dezvoltator web PRO”.

Curs online „Dezvoltator C# de la zero”.

Curs practic anual «Dezvoltator PHP de la 0 la PRO».

Sursa: habr.com

Scriem o aplicație multilingvă în React Native