Novedades de NativeScript 6.5

¡Bienvenido a otro lanzamiento del framework de desarrollo de aplicaciones multiplataforma NativeScript! La versión 6.5 de NativeScript ofrece algunos importantes cambios.

Antes de nada debemos actualizar nuestra versión de NativeScript, a la nueva versión 6.5:

**npm** install -g nativescript

A continuación, intentaremos revisar los cambios más importantes de esta nueva versión, uno por uno.

1. Creación dinámica de pestañas y navegación inferior

Los componentes Tabsy BottomNavigation se introdujeron como componentes beta en NativeScript 6.1. Con esta versión, ambos componentes están ampliando aún más su funcionalidad al proporcionar medios para crearlos mediante la programación del propio código.

Para admitir la creación dinámica de los componentes, se introdujeron dos nuevas propiedades como parte del subcomponentes TabStrip. El primero es el iconSource que se usa para crear mediante programación el ícono TabStrip (que admite un archivo de recursos vía res://, un archivo local vía ~/ y una fuente de ícono vía font://). Se llama a la segunda propiedad iconClass y su propósito es establecer la clase CSS que se aplicará al icono (imprescindible si desea utilizar una fuente de icono con font://).

Ejemplo para la creación dinámica de Tabs:

let tabs = new Tabs();
let myTabStrip = new TabStrip();

let tabStripItem1 = new TabStripItem();
tabStripItem1.title = "Tab 1";
tabStripItem1.iconSource = `font://${String.fromCharCode(0xf053)}`;
tabStripItem1.iconClass = "fas"; // e.g., Font Awesome
let tabStripItem2 = new TabStripItem();
tabStripItem2.title = "Tab 2";
tabStripItem2.iconSource = `font://${String.fromCharCode(0xf070)}`;
tabStripItem2.iconClass = "fas"; // e.g., Font Awesome

myTabStrip.items = [tabStripItem1, tabStripItem2];

let tabContentItem1 = new TabContentItem();
tabContentItem1.content = createContent("Content 1");
let tabContentItem2 = new TabContentItem();
tabContentItem2.content = createContent("Content 2");

let contentItems = [tabContentItem1, tabContentItem2];   

tabs.tabStrip = myTabStrip;

// Note: The number of content items must be equal to the number of strip items
tabs.items = contentItems; 

2. Nuevas propiedades de estilo en TabStrip

Estamos presentando dos nuevas propiedades para el componente TabStrip: selectedItemColor y unSelectedItemColor. La razón para introducir estas propiedades es tener la capacidad de modificar fácilmente el color del icono TabStrip y el texto de los elementos. Hacer esto también sigue las Pautas de diseño de materiales para que el icono y el color del texto sean los mismos.

Usar estas nuevas propiedades es bastante fácil. Supongamos que tenemos u componente simple Tabs y queremos hacer el selector rojo selectedItemColor o el selector en verde unSelectedItemColor:

<Tabs selectedIndex="1">
    <TabStrip selectedItemColor="red" unSelectedItemColor="green">
            ...
    </TabStrip>
</Tabs>

Cuando creemos nuestra aplicación, observaremos que el icono y el texto tendrán los colores especificados establecidos a través del framework.

3. Opciones avanzadas de estilo en pestañas de iOS

Antes de la versión 6.5, el componente Tabs tenía las posibilidades de estilo limitadas bajo el soporte de iOS. Ahora las opciones de estilo en iOS se amplían enormemente al proporcionar una propiedad para la alineación de la tira de pestañas y también al proporcionar nuevas opciones para aplicar un estilo CSS extendido.

Para cambiar la alineación de TabStrip, establezca la propiedad iOSTabBarItemsAlignment del componente Tabs.

<!-- justify is now the defealt value for iOSTabBarItemsAlignment property -->
<Tabs iOSTabBarItemsAlignment="justify">

La nueva propiedad admite los siguientes valores:

• leading: los elementos de la pestaña están alineados a la izquierda.
• justified: la tira de pestañas se divide por igual para todos los elementos de pestañas.
• center: los elementos de las pestañas están alineados en el centro.
• centerSelected: los elementos de la pestaña se mueven para hacer que la pestaña seleccionada esté en el centro.

La propiedad anterior ahora proporcionan medios para cambiar la font, background-color, color, y TextTransform. Tenga en cuenta que hay algunas limitaciones:

• Los tabbar de iOS MDCTabBar sólo admiten dos estilos de los elementos de barra de pestañas – normal y selected, lo que significa que no se puede tener diferentes estilos de dos elementos con el mismo estado normal.
• Los valores TextTransform admitidos para TabStrip son none, initialy uppercase.
• Si iOSTabBarItemsAlignment está configurado en algo diferente a justify y se desea establecer el fondo del elemento seleccionado, puede lograrlo configurando el estilo :active del elemento TabStrip, pero el indicador de selección de resaltado no se mostrará en ese caso.

4. DoubleTapGestureEventData

Este es un cambio impulsado por la comunidad (¡gracias a MCurran16!) Se han extendido los datos de eventos de doble clic que hasta ahora eran de tipo genérico (GestureEventData). El recién introducido DoubleTapGestureEventData amplía los datos comunes al proporcionar dos métodos para acceder a las coordenadas del evento de doble toque desencadenado. Los métodos son getX() y getY() que como te puedes imaginar, devolverán las coordenadas X e Y para la interacción actual. Los valores están en píxeles del dispositivo según el sistema de coordenadas de la plataforma específico.

5. Soporte experimental de KotlinJS

Con esta versión, continuamos apoyando a Kotlin, pero esta vez en el lado frontal del desarrollo de aplicaciones. Estamos presentando soporte experimental para escribir aplicaciones NativeScript con KotlinJS.

Debemos decir que esto es altamente experimental y está sujeto a cambios pero, sin embargo, estaríamos felices de que la comunidad eche un vistazo a la muestra HelloWorld con KotlinJS. Por favor, siga las instrucciones en el archivo README.md para usarlo. Pronto más documentación adicional.

Fuente: NativeScript Blog Oficial traducción al castellano por Pablo Álvarez Corredera bajo permiso del autor.