NativeScript: Usando Localize para internacionalizar nuestra aplicación

Bueno, bueno… tras sufrir horas buscando una forma de utilizar nuestro View Model personalizado en conjunto con el plugin Localize de NativeScript y no encontrar nada, el equipo Anubbe se dio a la tarea de resolver el problema de una forma creativa y sencilla (aclaramos que el uso aquí es distinto a como se indica en la documentación oficial).

Lo primero que haremos es instalar el plugin @nativescript/localize en nuestro proyecto, para eso utilizaremos el siguiente comando:

ns plugin add @nativescript/localize

Lo siguiente es crear nuestra carpeta con los archivos de las traducciones, recuerden que este plugin esta inspirado en i18next por lo tanto nuestra carpeta debe tener ese nombre, quedando la estructura así:

app
    | u18n
        | es.default.json      <-- JSON en español y que será el lenguaje predeterminado
        | en.json              <-- JSON en ingles

Podemos agregar la cantidad que queramos de archivos JSON en la carpeta, solo cuiden que se siga el formato de iso-de-idioma.json, ejemplo:

• fr.json para francés
• en.json para inglés
• de.json para alemán
• etc…

Cada archivo JSON debe tener la siguiente estructura:

Estructura:
{
    "id mensaje": "mensaje",
}

Ejemplo español:
{
    "Hola Mundo": "Hola Mundo",
}

Ejemplo inglés:
{
    "Hola Mundo": "Hello World",
}

En nuestro archivo app.js agregaremos lo siguiente para establecer los recursos.

const { localize } = require("@nativescript/localize");
Application.setResources({ _: localize }}; // Yo utilizó guión bajo (_) para seguir mi construmbre de gettext en PHP, simple comodidad y mania mía, si prefieres puedes usarlo como en la documentación oficial L: localize

Para mandar a llamar una traducción dentro de nuestra vista XML lo haremos así:

<Label text="{{ _('Hola Mundo') }}"/>

Si deseamos trabajar con View Model personalizado y las traducciones, haremos lo siguiente en nuestro script JS:

// Llamado al plugin
const { localize } = require("@nativescript/localize");

// Lo usaremos así
console.log(localize("Hola Mundo"));

¡Importante!

Si no ves las traducciones, recuerda que debes detener la aplicación en la terminal y volver a correr el proyecto para que vuelva a compilar todos los archivos.