🥇Scrivemu una applicazione multilingue nantu à React Native

A localizazione di i prudutti hè assai impurtante per l'imprese internaziunali chì sviluppanu novi paesi è regioni. In listessu modu, a localizazione hè necessaria per l'applicazioni mobili. Se un sviluppatore principia l'espansione internaziunale, hè impurtante di dà l'utilizatori di un altru paese l'uppurtunità di travaglià cù l'interfaccia in a so lingua nativa. In questu articulu, creeremu una app React Native cù u pacchettu reagisce-nativu-localize.

Skillbox consiglia: Corso educativu in linea "Professional Java Developer".
Ramintemu: per tutti i lettori di "Habr" - un scontu di 10 000 rubles quandu si iscrizzione in ogni cursu Skillbox cù u codice promozionale "Habr".

Strumenti è cumpetenze

Capisce stu articulu richiede cumpetenze basiche di React Native. Per fà cunnosce i paràmetri di a macchina di travagliu, pudete aduprà istruzzioni ufficiali.

Avemu bisognu di sti versioni di strumenti di software:

Node v10.15.0
npm 6.4.1
filatu 1.16.0
reagisce-nativu 0.59.9
reagisce-native-localize 1.1.3
i18n-js 3.3.0

Cumminciate

Creemu una applicazione chì sustene l'inglese, u francese è l'arabu. Prima criemu un novu prughjettu usendu react-native-cli. Per fà questu, in u terminal avete bisognu di scrive questu:

$ react-native init multiLanguage
$ cd multilingue

Aghjunghjendu e librerie necessarie

U primu passu hè di stallà react-native-localize scrivendu u seguente:
$ filatu aghjunghje react-native-localize

Se avete prublemi durante u prucessu di stallazione, verificate u manuale di installazione.

A libreria reagisce-native-localize dà à u sviluppatore l'accessu à e funzioni multilingue. Ma hà bisognu di una altra biblioteca - i18n.

L'articulu descrive l'usu I18n.js per furnisce a traduzzione in JavaScript.

$ filatu aghjunghje i18n-js

Ebbè, postu chì i18n-js ùn furnisce micca caching o memoization, suggeriu di utilizà lodash.memoize per questu:

$ filatu aghjunghje lodash.memoize

U travagliu cù traduzzioni

Per chì l'applicazione funziona cù altre lingue, avete prima bisognu di creà un repertoriu di traduzzione in src, dopu trè file JSON per ognuna di e lingue.

1. en.json per l'inglese;

2. fr.json per u francese;

3. ar.json per l'arabu.

Questi schedari cuntenenu oggetti JSON cù chjave è valori. A chjave serà a stessa per ogni lingua. Hè utilizatu da l'applicazione per vede l'infurmazioni testuali.

U valore (valore) hè u testu chì deve esse mostratu à l'utilizatore.

Inglese:

{ "hello": "Hello World!"}

Francese

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

Àrabbu

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

Altre lingue ponu esse aghjuntu in u listessu modu.

codice principale

À questu puntu, avete bisognu di apre u schedariu App.js è aghjunghje impurtazioni à questu:

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

Dopu à quessa, e funzioni ausiliarii è custanti sò aghjuntu, chì seranu utili dopu.

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

Ebbè, avà criemu un cumpunente di a classa 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
  }
});

U primu elementu, setI18nConfig(), stabilisce a cunfigurazione iniziale.

Allora avemu bisognu di aghjunghje un listener di l'avvenimentu à componentDidMount() , questu elementu ascolterà l'aghjurnamenti è chjamà handleLocalizationChange () quandu si verificanu.

U metudu handleLocalizationChange() invoca setI18nConfig() è forceUpdate(). Questu hè necessariu per i dispositi Android, cum'è u cumpunente deve esse rende per chì i cambiamenti diventenu visibili.

Allora avemu bisognu di caccià u listener da u metudu componentWillUnmount ().

Infine, ciao hè tornatu in render () usendu translate () è aghjunghjendu un paràmetru chjave. Dopu à sti passi, l 'applicazzioni sarà capaci di "capì" chì lingua hè necessariu è vede missaghji in lu.

Lanciamentu di l'applicazione

Avà hè u tempu di verificà cumu funziona a traduzzione.

Prima eseguimu l'applicazione in u simulatore o l'emulatore scrivendu

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

Serà qualcosa cusì:

Avà pudete pruvà à cambià a lingua in francese lanciando l'applicazione.

Facemu listessa cù a lingua araba, ùn ci hè micca sfarenza.

Finu a ora tuttu va bè.

Ma chì succede se selezziunate una lingua aleatoria chì ùn hà micca una traduzzione in l'app?

Risulta chì u compitu di findBestLanguage hè di furnisce a megliu traduzzione pussibule trà tutti i dispunibili. In u risultatu, a lingua chì hè stata stabilita per difettu serà visualizata.

Si tratta di paràmetri di u telefunu. Cusì, per esempiu, in l'emulatore iOS, pudete vede l'ordine di e lingue.

Se a lingua scelta ùn hè micca a lingua preferita, findBestAvailableLanguage torna undefined in modu chì a lingua predeterminata hè mostrata.

Bonus

react-native-localize hà una API chì furnisce accessu à un gran numaru di elementi di lingua. Prima di principià u travagliu, vale a pena leghje a documentazione.

scuperti

L'applicazione pò esse fatta multilingue senza prublemi. React-native-localize hè una grande opzione chì vi permette di espansione a gamma di utilizatori di a vostra applicazione.

U codice fonte di u prughjettu situatu quì.

Skillbox consiglia:

Corso praticu di dui anni "Sò un sviluppatore web PRO".

Corsu in ligna "Sviluppatore C# da zero".

Corso praticu annu "Sviluppatore PHP da 0 à PRO".

Source: www.habr.com

Scrivemu una applicazione multilingue nantu à React Native