🥇Scriviamo un'applicazione multilingue in React Native

La localizzazione dei prodotti è molto importante per le aziende internazionali che si stanno espandendo in nuovi paesi e regioni. Allo stesso modo, la localizzazione è necessaria anche per le applicazioni mobili. Se uno sviluppatore inizia l'espansione internazionale, è fondamentale offrire agli utenti di un altro paese la possibilità di utilizzare l'interfaccia nella propria lingua madre. In questo articolo, creeremo un'app React Native utilizzando il pacchetto react-native-localize.

Skillbox consiglia: Corso online educativo «Professione Sviluppatore Java».
Ricordiamo: per tutti i lettori di «Habr» — sconto di 10.000 rubli per l'iscrizione a qualsiasi corso Skillbox con il codice promozionale «Habr».

Strumenti e competenze

Per comprendere questo articolo sono necessarie competenze di base su React Native. Per familiarizzare con la configurazione della macchina di lavoro, si può utilizzare la guida ufficiale.

Avremo bisogno delle seguenti versioni degli strumenti 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

Iniziamo

Creeremo un'app che supporti le lingue inglese, francese e araba. Iniziamo creando un nuovo progetto utilizzando react-native-cli. Per fare ciò, nel terminale bisogna digitare quanto segue:

$ react-native init multiLanguage
$ cd multiLanguage

Aggiungiamo le librerie necessarie

Per prima cosa, dobbiamo installare react-native-localize, digitando questo:
$ yarn add react-native-localize

Se durante l'installazione si verificano problemi, è consigliabile esaminare il manuale di installazione.

La libreria react-native-localize fornisce agli sviluppatori accesso a funzionalità multilingue. Ma ha bisogno di un'altra libreria: i18n.

L'articolo descrive l'uso I18n.js per fornire traduzioni in JavaScript.

$ yarn add i18n-js

E poiché i18n-js non offre caching o memoizzazione, suggerisco di utilizzare lodash.memoize per questo scopo:

$ yarn add lodash.memoize

Lavorare con le traduzioni

Per consentire all'applicazione di funzionare anche con altre lingue, è necessario prima creare una cartella translations all'interno di src, e poi — tre file JSON, uno per ciascuna lingua.

1. en.json per l'inglese;

2. fr.json per il francese;

3. ar.json per l'arabo.

Questi file contengono oggetti JSON con chiavi e valori. La chiave sarà la stessa per ogni lingua. Viene utilizzata dall'app per visualizzare le informazioni testuali.

Il valore (value) è il testo da mostrare all'utente.

Lingua inglese:

{ "hello": "Hello World!"}

Francese

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

Arabo

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

In modo simile, è possibile aggiungere altre lingue.

Codice principale

A questo punto, è necessario aprire il file App.js e aggiungere l'importazione:

import React from "react";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";
import memoize from "lodash.memoize"; // Utilizzare per la cache/memoization per migliori prestazioni
 
import {
  I18nManager,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View
} from "react-native";

Dopo di che, si aggiungono le funzioni ausiliarie e le costanti che saranno utili in seguito.

const translationGetters = {
  // require pigro (metro bundler non supporta i 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 se nessuna lingua disponibile si adatta
  const fallback = { languageTag: "en", isRTL: false };
 
  const { languageTag, isRTL } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
    fallback;
 
  // cancella la cache delle traduzioni
  translate.cache.clear();
  // aggiorna la direzione del layout
  I18nManager.forceRTL(isRTL);
  // imposta la configurazione di i18n-js
  i18n.translations = { [languageTag]: translationGetters[languageTag]() };
  i18n.locale = languageTag;
};

Ora creiamo il componente di classe App:

export default class App extends React.Component {
  constructor(props) {
    super(props);
    setI18nConfig(); // imposta la configurazione iniziale
  }
 
  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
  }
});

Il primo elemento — setI18nConfig() — imposta la configurazione iniziale.

Poi, in componentDidMount() è necessario aggiungere l'ascolto degli eventi; questo elemento monitorerà gli aggiornamenti e chiamerà handleLocalizationChange() quando essi si verificano.

Il metodo handleLocalizationChange() attiva setI18nConfig() e forceUpdate(). Questo è necessario per i dispositivi Android, poiché il componente deve essere renderizzato affinché le modifiche siano visibili.

Poi è necessario rimuovere l'ascolto nel metodo componentWillUnmount().

Infine, in render() viene restituito hello utilizzando translate() e passando il parametro key. Dopo queste azioni, l'app sarà in grado di "capire" quale lingua è necessaria e mostrare i messaggi proprio in essa.

Avvio dell'applicazione

Ora è il momento di controllare come funziona la traduzione.

Iniziamo a eseguire l'app in un simulatore o emulatore, digitando

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

Dovrebbe apparire più o meno così:

Ora puoi provare a cambiare la lingua in francese, lanciando poi l'applicazione.

Per la lingua araba facciamo la stessa cosa, non ci sono differenze.

Per ora tutto procede bene.

Ma cosa succede se scegli una lingua casuale, per la quale non c'è traduzione nell'applicazione?

Si scopre che il compito di findBestLanguage è fornire la traduzione ottimale tra quelle disponibili. Di conseguenza, verrà visualizzata la lingua impostata come predefinita.

Si tratta delle impostazioni del telefono. Ad esempio, nell'emulatore iOS puoi vedere l'ordine delle lingue.

Se la lingua selezionata non è quella preferita, findBestAvailableLanguage restituisce undefined, quindi viene mostrata quella impostata come predefinita.

Bonus

react-native-localize ha un'API che fornisce accesso a un gran numero di elementi linguistici. Prima di iniziare a lavorare, è consigliabile familiarizzare con la documentazione.

Conclusioni

Puoi rendere l'applicazione multilingue senza problemi. React-native-localize è un'ottima opzione che consente di ampliare il segmento degli utenti dell'applicazione.

Il codice sorgente del progetto si trova qui.

Skillbox consiglia:

Corso pratico di due anni «Sono un web developer PRO».

Corso online «Sviluppatore C# da zero».

Corso pratico annuale «Sviluppatore PHP da 0 a PRO».

Fonte: habr.com

Scriviamo un'applicazione multilingue con React Native