🥇Creiamo un'applicazione multilingue con React Native

La localizzazione dei prodotti è fondamentale per le aziende internazionali che si stanno espandendo in nuovi paesi e regioni. Allo stesso modo, la localizzazione è necessaria anche per le applicazioni mobili. Quando uno sviluppatore inizia un'espansione internazionale, è importante permettere agli utenti di un altro paese di utilizzare l'interfaccia nella propria lingua madre. In questo articolo, creeremo un'applicazione 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, è necessario avere conoscenze di base su React Native. Per informazioni sulla configurazione della macchina di lavoro, è possibile consultare le istruzioni ufficiali.

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'applicazione che supporterà l'inglese, il francese e l'arabo. Per prima cosa, creiamo un nuovo progetto utilizzando react-native-cli. Per farlo, nel terminale bisogna digitare:

$ react-native init multiLanguage
$ cd multiLanguage

Aggiungiamo le librerie necessarie

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

Se si riscontrano problemi durante l'installazione, vale la pena consultare il manuale di installazione.

La libreria react-native-localize offre agli sviluppatori l'accesso alle funzioni multilingue. Ma ha bisogno di un'altra libreria: i18n.

L'articolo descrive l'uso di I18n.js per garantire la traduzione in JavaScript.

$ yarn add i18n-js

Poiché i18n-js non fornisce caching o memoization, ti consiglio di utilizzare lodash.memoize per questo:

$ yarn add lodash.memoize

Lavorare con le traduzioni

Affinché l'app possa gestire 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 che deve essere mostrato all'utente.

Lingua inglese:

{ "hello": "Hello World!"}

Francese

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

Arabo

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

Allo stesso modo, è possibile aggiungere altre lingue.

Codice principale

A questo punto, apri il file App.js e aggiungi l'importazione:

import React from "react";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";
import memoize from "lodash.memoize"; // Utilizzalo per il caching/memoization per migliori performance
 
import {
  I18nManager,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View
} from "react-native";

Dopo di ciò, vengono aggiunte funzioni ausiliarie e costanti che saranno utili in seguito.

const translationGetters = {
  // lazy requires (il metro bundler non supporta i 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 = () => {
  // fallback se nessuna lingua disponibile è adatta
  const fallback = { languageTag: "en", isRTL: false };
 
  const { languageTag, isRTL } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
    fallback;
 
  // svuota 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 della 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, nel componentDidMount(), è necessario aggiungere l'ascoltatore di eventi, questo elemento monitorerà gli aggiornamenti e chiamerà handleLocalizationChange() quando 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.

Dopo, è necessario rimuovere l'ascoltatore nel metodo componentWillUnmount().

Alla fine, nel render() viene restituito hello utilizzando translate() e aggiungendo il parametro key. Dopo queste azioni, l'app potrà 'capire' quale lingua è necessaria e mostrare i messaggi proprio in quella idioma.

Avvio dell'applicazione

Ora è il momento di verificare come funziona la traduzione.

Innanzitutto, avviamo l'app nel simulatore o nell'emulatore digitando

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

Dovrebbe apparire circa così:

Ora puoi provare a cambiare la lingua in francese, avviando successivamente l'app.

Con la lingua araba facciamo la stessa cosa, non c'è differenza.

Finora tutto procede bene.

Ma cosa succede se si sceglie una lingua casuale di cui non esiste una traduzione nell'app?

Si scopre che il compito di findBestLanguage è fornire la migliore traduzione disponibile. Di conseguenza, verrà visualizzata la lingua impostata come predefinita.

Si parla 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 la lingua impostata per default.

Bonus

React-native-localize offre un'API che fornisce accesso a un'ampia gamma di elementi linguistici. Prima di iniziare, è opportuno consultare la documentazione.

Conclusioni

È possibile rendere l'applicazione multilingue senza particolari problemi. React-native-localize è un'ottima soluzione che permette di ampliare il pubblico dell'app.

Il codice sorgente del progetto è disponibile qui.

Skillbox consiglia:

Corso pratico di due anni «Sono uno sviluppatore web PRO».

Corso online «Sviluppatore C# da zero».

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

Fonte: habr.com

Scriviamo un'applicazione multilingue su React Native