🥇Creamos una aplicación multilingüe en React Native

La localización de productos es muy importante para las empresas internacionales que están explorando nuevos países y regiones. De manera similar, la localización también es necesaria para las aplicaciones móviles. Si un desarrollador comienza una expansión internacional, es crucial permitir a los usuarios de otro país trabajar con la interfaz en su idioma nativo. En este artículo, crearemos una aplicación React Native utilizando el paquete react-native-localize.

Skillbox recomienda: Curso en línea educativo «Profesión Desarrollador Java».
Recordamos: para todos los lectores de «Habr» — un descuento de 10,000 rublos al registrarse en cualquier curso de Skillbox usando el código promocional «Habr».

Herramientas y habilidades

Para entender este artículo, se necesitan habilidades básicas en React Native. Para familiarizarse con la configuración de la máquina de trabajo, se puede consultar la guía oficial.

Necesitaremos las siguientes versiones de herramientas de 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

Empezamos

Crearemos una aplicación que soporte inglés, francés y árabe. Primero creamos un nuevo proyecto utilizando react-native-cli. Para hacer esto, en la terminal necesitamos escribir lo siguiente:

$ react-native init multiLanguage
$ cd multiLanguage

Agregamos las bibliotecas necesarias

Primero, necesitamos instalar react-native-localize, escribiendo lo siguiente:
$ yarn add react-native-localize

Si surgen problemas durante la instalación, es recomendable revisar el manual de instalación.

La biblioteca react-native-localize da al desarrollador acceso a funciones multilingües. Pero también necesita otra biblioteca: i18n.

El artículo describe el uso I18n.js para proporcionar traducción en JavaScript.

$ yarn add i18n-js

Dado que i18n-js no proporciona almacenamiento en caché ni memorización, sugiero utilizar lodash.memoize para esta tarea:

$ yarn add lodash.memoize

Trabajando con traducciones

Para que la aplicación pueda manejar otros idiomas, primero debemos crear un directorio translations dentro de src, luego tres archivos JSON, uno para cada idioma.

1. en.json para inglés;

2. fr.json para francés;

3. ar.json para árabe.

Estos archivos contienen objetos JSON con claves y valores. La clave será la misma para cada idioma. Se utiliza en la aplicación para mostrar la información textual.

El valor (value) es el texto que se debe mostrar al usuario.

Inglés:

{ "hello": "Hello World!"}

Francés

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

Árabe

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

De manera similar, se pueden agregar otros idiomas.

Código principal

En esta etapa, debemos abrir el archivo App.js y agregar la importación:

import React from "react";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";
import memoize from "lodash.memoize"; // Usar para caché/memoización para un mejor rendimiento
 
import {
  I18nManager,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View
} from "react-native";

A continuación, se añaden funciones auxiliares y constantes que serán útiles más adelante.

const translationGetters = {
  // requerimientos perezosos (el agrupador de metro no soporta enlaces simbólicos)
  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 = () => {
  // establecer un valor predeterminado si no hay un idioma disponible
  const fallback = { languageTag: "en", isRTL: false };
 
  const { languageTag, isRTL } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
    fallback;
 
  // limpiar caché de traducción
  translate.cache.clear();
  // actualizar dirección de diseño
  I18nManager.forceRTL(isRTL);
  // establecer la configuración de i18n-js
  i18n.translations = { [languageTag]: translationGetters[languageTag]() };
  i18n.locale = languageTag;
};

Ahora vamos a crear el componente de clase App:

export default class App extends React.Component {
  constructor(props) {
    super(props);
    setI18nConfig(); // establecer configuración inicial
  }
 
  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
  }
});

El primer elemento — setI18nConfig() — establece la configuración inicial.

Luego, en componentDidMount() se debe agregar un listener para eventos, este elemento estará monitoreando las actualizaciones y llamará a handleLocalizationChange() cuando ocurran.

El método handleLocalizationChange() activa setI18nConfig() y forceUpdate(). Esto es necesario para los dispositivos Android, ya que el componente debe renderizarse para que los cambios sean visibles.

Luego se debe eliminar el listener en el método componentWillUnmount().

Finalmente, en render() se devuelve hello utilizando translate() y añadiendo la clave como parámetro. Después de estos pasos, la aplicación podrá "entender" qué idioma necesita y mostrar mensajes en ese idioma.

Ejecutando la aplicación

Ahora es el momento de comprobar cómo funciona la traducción.

Primero, ejecuta la aplicación en el simulador o emulador, escribiendo

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

Esto se verá aproximadamente así:

Ahora puedes intentar cambiar el idioma a francés, ejecutando luego la aplicación.

Con el idioma árabe hacemos lo mismo, no hay diferencia.

Por ahora, todo va bien.

Pero, ¿qué sucederá si eliges un idioma al azar, para el cual no hay traducción en la aplicación?

Resulta que la tarea findBestLanguage es proporcionar la mejor traducción de todas las disponibles. Como resultado, se mostrará el idioma que se había establecido por defecto.

Se trata de la configuración del teléfono. Por ejemplo, en el emulador de iOS se puede ver el orden de los idiomas.

Si el idioma seleccionado no es el preferido, findBestAvailableLanguage devuelve undefined, por lo que se muestra el idioma que está configurado por defecto.

Bono

react-native-localize tiene una API que proporciona acceso a una gran cantidad de elementos lingüísticos. Antes de comenzar a trabajar, vale la pena familiarizarse con la documentación..

Conclusiones

Se puede hacer una aplicación multilingüe sin muchos problemas. React-native-localize es una excelente opción que permite ampliar la base de usuarios de la aplicación.

El código fuente del proyecto se encuentra aquí.

Skillbox recomienda:

Curso práctico de dos años «Soy Desarrollador Web PRO».

Curso en línea «Desarrollador C# desde cero».

Curso práctico de un año «Desarrollador PHP desde 0 hasta PRO».

Fuente: habr.com

Desarrollando una aplicación multilingüe con React Native