Scrierea unei aplicații multilingve în React Native

Localizarea produselor este foarte importantă pentru companiile internaționale care explorează noi țări și regiuni. În mod similar, localizarea este necesară pentru aplicațiile mobile. Dacă un dezvoltator începe expansiunea internațională, este important să le oferim utilizatorilor din altă țară posibilitatea de a lucra cu interfața în limba lor maternă. În acest articol, vom crea o aplicație React Native folosind pachetul reacţionaţi-nativ-localizaţi.

Skillbox recomandă: Curs educativ online „Profesie Dezvoltator Java”.
Amintim: pentru toți cititorii „Habr” - o reducere de 10 de ruble la înscrierea la orice curs Skillbox folosind codul promoțional „Habr”.

Instrumente și abilități

Pentru a înțelege acest articol, aveți nevoie de abilități de bază în lucrul cu React Native. Pentru a vă familiariza cu setările mașinii de lucru, puteți utilizați instrucțiunile oficiale.

Vom avea nevoie de aceste versiuni de instrumente software:

• Nodul v10.15.0
• npm 6.4.1
• fire 1.16.0
• react-nativ 0.59.9
• react-native-localize 1.1.3
• i18n-js 3.3.0

Noțiuni de bază

Vom crea o aplicație care va accepta limba engleză, franceză și arabă. Mai întâi creăm un nou proiect folosind react-native-cli. Pentru a face acest lucru, trebuie să tastați acest lucru în terminal:

$ react-native init multiLanguage
$ cd multilimba

Adăugarea bibliotecilor necesare

Primul pas este să instalați react-native-localize tastând următoarele:
$ yarn add react-native-localize

Dacă apar probleme în timpul procesului de instalare, Merită să citiți manualul de instalare.

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

Acest articol descrie utilizarea I18n.js pentru a oferi traducere în JavaScript.

$ yarn adăugați i18n-js

Ei bine, deoarece i18n-js nu oferă memorarea în cache sau memorare, sugerez să utilizați lodash.memoize pentru aceasta:

$ yarn add lodash.memoize

Lucrul cu traduceri

Pentru ca aplicația să poată funcționa cu alte limbi, mai întâi trebuie să creați un director de traduceri în interiorul src, apoi trei fișiere JSON pentru fiecare limbă.

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ă. Este folosit de aplicație pentru a afișa informații text.

Valoarea este textul care trebuie afișat utilizatorului.

Engleză:

{"hello": "Bună ziua, lume!"}

Французский

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

Арабский

{ „bună ziua”: „أهلاً بالعالم”}

Puteți adăuga alte limbi în același mod.

Codul principal

În acest moment, trebuie să deschideți fișierul App.js și să adăugați importuri la acesta:

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";

După aceasta, se adaugă funcții și constante auxiliare care vor fi utile mai târziu.

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

Ei bine, acum să creăm o componentă a clasei 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
  }
});

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

Apoi trebuie să adăugați un ascultător de evenimente la componentDidMount(), acest element va asculta actualizări și va apela handleLocalizationChange() atunci când acestea se întâmplă.

Metoda handleLocalizationChange() activează setI18nConfig() și forceUpdate(). Acest lucru este necesar pentru dispozitivele de pe Android, deoarece componenta trebuie randată pentru ca modificările să fie vizibile.

Apoi, trebuie să eliminați ascultarea din metoda componentWillUnmount().

În cele din urmă, render() returnează salut folosind translate() și adăugând un parametru cheie la acesta. După acești pași, aplicația va putea „înțelege” ce limbă este necesară și să afișeze mesaje în ea.

Lansarea aplicației

Acum este momentul să verificați 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 arata cam asa:

Acum puteți încerca să schimbați limba în franceză lansând aplicația.

Facem același lucru cu araba, nu este nicio diferență.

Până acum, bine.

Dar ce se întâmplă dacă selectați o limbă aleatorie pentru care nu există nicio traducere în aplicație?

Se pare că sarcina findBestLanguage este de a oferi traducerea optimă dintre toate cele disponibile. Ca rezultat, limba implicită va fi afișată.

Vorbim despre setările telefonului. De exemplu, în emulatorul iOS puteți vedea ordinea limbilor.

Dacă limba selectată nu este limba preferată, findBestAvailableLanguage returnează nedefinit, astfel încât să fie afișată limba implicită.

primă

react-native-localize are un API care oferă acces la un număr mare de elemente de limbaj. Înainte de a începe munca, Merită să verificați documentația.

Constatări

Aplicația poate fi făcută multilingvă fără probleme. React-native-localize este o opțiune excelentă care vă permite să extindeți baza de utilizatori a aplicației.

Codul sursă al proiectului este 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: www.habr.com