Scrivere un'applicazione multilingue in React Native

La localizzazione del prodotto è molto importante per le aziende internazionali che esplorano nuovi paesi e regioni. Allo stesso modo, la localizzazione è necessaria per le applicazioni mobili. Se uno sviluppatore inizia l'espansione internazionale, è importante offrire agli utenti di un altro paese l'opportunità di lavorare con l'interfaccia nella loro lingua madre. In questo articolo creeremo un'applicazione React Native utilizzando il pacchetto reagire-nativo-localizzare.

Skillbox consiglia: Corso didattico online "Sviluppatore Java professionista".
Ti ricordiamo: per tutti i lettori di "Habr" - uno sconto di 10 rubli al momento dell'iscrizione a qualsiasi corso Skillbox utilizzando il codice promozionale "Habr".

Strumenti e abilità

Per comprendere questo articolo, sono necessarie competenze di base per lavorare con React Native. Per familiarizzare con le impostazioni della macchina funzionante, puoi utilizzare le istruzioni ufficiali.

Avremo bisogno di queste versioni di strumenti software:

• Nodo v10.15.0
• npm 6.4.1
• filato 1.16.0
• reattivo-nativo 0.59.9
• reagire-nativo-localizzare 1.1.3
• i18n-js 3.3.0

Начинаем

Creeremo un'applicazione che supporterà inglese, francese e arabo. Per prima cosa creiamo un nuovo progetto utilizzando react-native-cli. Per fare ciò è necessario digitare nel terminale:

$ react-native init multilingua
$ cd multilingue

Aggiunta delle librerie necessarie

Il primo passo è installare react-native-localize digitando quanto segue:
$ filato aggiungi react-native-localize

Se si verificano problemi durante il processo di installazione, Vale la pena leggere il manuale di installazione.

La libreria react-native-localize offre allo sviluppatore l'accesso a funzionalità multilingue. Ma ha bisogno di un'altra libreria: i18n.

Questo articolo descrive l'uso I18n.js per fornire la traduzione in JavaScript.

$ filato aggiungi i18n-js

Bene, poiché i18n-js non fornisce memorizzazione nella cache o memorizzazione, suggerisco di utilizzare lodash.memoize per questo:

$ filato aggiungi lodash.memoize

Lavorare con le traduzioni

Affinché l'applicazione possa funzionare con altre lingue, è necessario prima creare una directory delle traduzioni all'interno di src, quindi tre file JSON 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 utilizzato dall'applicazione per visualizzare informazioni di testo.

Il valore è il testo che deve essere mostrato all'utente.

Inglese:

{"ciao": "Ciao mondo!"}

Francese

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

arabo

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

Puoi aggiungere altre lingue allo stesso modo.

Codice principale

A questo punto è necessario aprire il file App.js e aggiungervi le importazioni:

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

Successivamente vengono aggiunte funzioni e costanti ausiliarie che saranno utili in seguito.

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

Bene, ora creiamo un componente della classe 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
  }
});

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

Quindi devi aggiungere un ascoltatore di eventi a componenteDidMount(), questo elemento ascolterà gli aggiornamenti e chiamerà handleLocalizationChange() quando si verificano.

Il metodo handleLocalizationChange() attiva setI18nConfig() e forceUpdate(). Ciò è necessario per i dispositivi Android poiché è necessario eseguire il rendering del componente affinché le modifiche siano evidenti.

Quindi è necessario rimuovere l'ascolto dal metodo ComponentWillUnmount().

Infine, render() restituisce ciao utilizzando Translate() e aggiungendovi un parametro chiave. Dopo questi passaggi, l'applicazione sarà in grado di “capire” quale lingua è necessaria e visualizzare i messaggi al suo interno.

Avvio dell'applicazione

Ora è il momento di verificare come funziona la traduzione.

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

$ run-ios react-nativo
$ run-android nativo di reazione

Sembrerà qualcosa del genere:

Ora puoi provare a cambiare la lingua in francese avviando l'applicazione.

Facciamo la stessa cosa con l'arabo, non c'è differenza.

Fin qui tutto bene.

Ma cosa succede se selezioni una lingua a caso per la quale non è presente alcuna traduzione nell'applicazione?

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

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

Se la lingua selezionata non è la lingua preferita, findBestAvailableLanguage restituisce undefinito in modo che venga visualizzata la lingua predefinita.

premio

react-native-localize ha un'API che fornisce l'accesso a un gran numero di elementi linguistici. Prima di iniziare a lavorare, Vale la pena consultare la documentazione.

risultati

L'applicazione può essere resa multilingue senza problemi. React-native-localize è un'ottima opzione che ti consente di espandere la base utenti della tua app.

Codice sorgente del progetto è 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