🥇Escrivim una aplicació multilingüe a React Native

La localització de productes és molt important per a les empreses internacionals que desenvolupen nous països i regions. De la mateixa manera, la localització és necessària per a les aplicacions mòbils. Si un desenvolupador comença l'expansió internacional, és important oferir als usuaris d'un altre país l'oportunitat de treballar amb la interfície en la seva llengua materna. En aquest article, crearem una aplicació React Native utilitzant el paquet reaccionar-natiu-localitzar.

Skillbox recomana: Curs educatiu en línia "Desenvolupador Java professional".
Recordem: per a tots els lectors de "Habr": un descompte de 10 rubles en inscriure's a qualsevol curs de Skillbox amb el codi promocional "Habr".

Eines i habilitats

Entendre aquest article requereix habilitats bàsiques de React Native. Per familiaritzar-se amb la configuració de la màquina de treball, podeu utilitzar instruccions oficials.

Necessitem aquestes versions d'eines de programari:

Node v10.15.0
npm 6.4.1
fil 1.16.0
reaccionar-natiu 0.59.9
reaccionar-natiu-localitzar 1.1.3
i18n-js 3.3.0

Introducció

Crearem una aplicació que admetrà anglès, francès i àrab. Primer creem un nou projecte amb react-native-cli. Per fer-ho, al terminal heu d'escriure això:

$ react-native init multiLanguage
$ cd multiidioma

Afegint les biblioteques necessàries

El primer pas és instal·lar react-native-localize escrivint el següent:
$ fil afegir react-native-localize

Si trobeu problemes durant el procés d'instal·lació, consulteu el manual d'instal·lació.

La biblioteca react-native-localize ofereix al desenvolupador accés a funcions multilingües. Però necessita una altra biblioteca: i18n.

L'article descriu l'ús I18n.js per tal de proporcionar traducció en JavaScript.

$ fil afegir i18n-js

Bé, com que i18n-js no proporciona memòria cau ni memorització, suggereixo utilitzar lodash.memoize per a això:

$ fil afegir lodash.memoize

Treballar amb traduccions

Perquè l'aplicació funcioni amb altres idiomes, primer heu de crear un directori de traduccions dins de src i després tres fitxers JSON per a cadascun dels idiomes.

1. en.json per a anglès;

2. fr.json per al francès;

3. ar.json per a àrab.

Aquests fitxers contenen objectes JSON amb claus i valors. La clau serà la mateixa per a cada idioma. L'utilitza l'aplicació per mostrar informació textual.

El valor (valor) és el text que cal mostrar a l'usuari.

Anglès:

{ "hello": "Hola món!"}

Французский

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

Арабский

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

Es poden afegir altres idiomes de la mateixa manera.

Codi principal

En aquest punt, heu d'obrir el fitxer App.js i afegir-hi importacions:

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

Després d'això, s'afegeixen funcions i constants auxiliars, que seran útils més endavant.

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

Bé, ara creem un component de la 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
  }
});

El primer element, setI18nConfig(), estableix la configuració inicial.

Aleshores hem d'afegir un escolta d'esdeveniments a componentDidMount() , aquest element escoltarà les actualitzacions i trucarà a handleLocalizationChange() quan es produeixin.

El mètode handleLocalizationChange() invoca setI18nConfig() i forceUpdate(). Això és necessari per als dispositius Android, ja que el component s'ha de representar perquè els canvis siguin visibles.

Aleshores hem d'eliminar l'oient del mètode componentWillUnmount().

Finalment, hello es retorna a render() utilitzant translate() i afegint-hi un paràmetre clau. Després d'aquests passos, l'aplicació podrà "entendre" quin idioma es necessita i mostrar-hi missatges.

Llançament de l'aplicació

Ara és el moment de comprovar com funciona la traducció.

Primer executem l'aplicació al simulador o emulador escrivint

$ run-ios natiu de reacció
$ react-native run-android

Es veurà com això:

Ara podeu provar de canviar l'idioma al francès iniciant l'aplicació.

Fem el mateix amb la llengua àrab, no hi ha diferència.

Fins aquí tot va bé.

Però què passa si seleccioneu un idioma aleatori que no té traducció a l'aplicació?

Resulta que la tasca de findBestLanguage és proporcionar la millor traducció possible entre totes les disponibles. Com a resultat, es mostrarà l'idioma establert per defecte.

Es tracta de la configuració del telèfon. Així, per exemple, a l'emulador d'iOS, podeu veure l'ordre dels idiomes.

Si l'idioma seleccionat no és l'idioma preferit, findBestAvailableLanguage retorna sense definir de manera que es mostra l'idioma predeterminat.

prima

react-native-localize té una API que proporciona accés a un gran nombre d'elements del llenguatge. Abans de començar a treballar, val la pena llegir la documentació.

Troballes

L'aplicació es pot fer multilingüe sense cap problema. React-native-localize és una gran opció que us permet ampliar el ventall d'usuaris de la vostra aplicació.

Codi font del projecte situat aquí.

Skillbox recomana:

Curs pràctic de dos anys "Sóc un desenvolupador web PRO".

Curs en línia "Desenvolupador C# des de zero".

Curs pràctic de l'any "Desenvolupador PHP de 0 a PRO".

Font: www.habr.com

Escrivim una aplicació multilingüe a React Native