Gestión de diseño de React Native con Yoga 3.0

React Native es un framework de JavaScript de código abierto que se utiliza para crear aplicaciones móviles. Una de sus mayores ventajas frente a otros lenguajes y frameworks es su capacidad para crear aplicaciones multiplataforma, que utilizan una única base de código y funcionan tanto en iOS como en Android.

Este es un aspecto importante porque permite un desarrollo de aplicaciones mucho más rápido; no es necesario crear la misma aplicación dos veces ni separar a los equipos para cada plataforma. La popularidad de las aplicaciones móviles sigue creciendo, por lo que contar con un flujo de trabajo de desarrollo eficaz es esencial para cualquier negocio digital.

Una buena gestión del diseño también es fundamental al desarrollar un diseño móvil responsivo y visualmente atractivo. React Native es compatible con el modelo de caja de diseño web Flexbox, lo que facilita su aprendizaje para cualquier desarrollador web, ya que se escriben básicamente los mismos estilos CSS. Esta implementación la gestiona el motor de diseño Yoga, desarrollado para aplicaciones React Native.

En este artículo, exploraremos la última versión de React Native v0.74, que presenta el lanzamiento del motor de diseño Yoga 3.0, que trae consigo algunas nuevas funcionalidades y correcciones de errores.

Actualizaciones de Yoga 3.0

Yoga 3.0 es un sistema de diseño que se puede implementar en diferentes frameworks, incluido React Native. Su objetivo principal es calcular la posición y el tamaño de varias cajas en una pantalla. Este es el principio fundamental para crear una interfaz de usuario. El sistema de diseño está diseñado para usar el popular modelo CSS flexbox, lo que facilita compartir código entre aplicaciones web y móviles.

Con la última versión de Yoga 3.0, se han implementado algunas mejoras en el rendimiento del diseño, especialmente en la previsibilidad y la consistencia de las interacciones web. Si bien puede haber algunas peculiaridades de diseño intencionales, estas se conservan para garantizar la compatibilidad con versiones anteriores. En general, la última versión de React Native se ajusta más a los estándares web establecidos en la API de Yoga 3.0.

Una de las novedades más importantes de Yoga 3.0 es su total compatibilidad con la posición CSS static. Esto es esencial al desarrollar aplicaciones y páginas web en línea. La staticposición garantiza que los elementos permanecerán en su posición original y no se moverán.

Los elementos con una staticposición no se pueden desplazar, lo que significa que no se moverán de su posición predeterminada. Además, se ignoran al definir el bloque contenedor para elementos con posición absoluta. Esto permite colocar un elemento en relación con un ancestro distinto de su elemento primario inmediato, lo que ofrece más opciones de diseño.

En general, ha habido bastantes mejoras en esta última versión, entre ellas:

• Hacer que el diseño sea más preciso y en línea con el modelo flexbox CSS
• Compatibilidad con las propiedades de flexbox CSS yposition: staticalign-content: space-evenly
• Eliminación y desvalorización de las API de Yoga más antiguas
• Corrección de fallos que pueden producirse en los enlaces de Java
• Los enlaces de JavaScript para Yoga ahora están disponibles como un módulo ES
• Cambios importantes en bases de códigos antiguos causados ​​por algunos de los cambios y mejoras

Ahora echamos un vistazo a algunas de las actualizaciones que se han realizado en React Native v0.74.

Actualizaciones de React Native v0.74

La primera actualización que cabe mencionar son las inversiones de diseño. El comportamiento de las propiedades de margen, relleno y borde en los contenedores ha cambiado; ahora es el mismo que en la web, por lo que no hay discrepancias. Por ejemplo, la propiedad en Yoga 3.0 ahora funciona igual que en CSS al usar flexbox en la web.row-reverseflex-direction

Otra nueva incorporación es la propiedad CSS, que distribuye uniformemente las líneas dentro de contenedores flexibles de varias líneas.alignContent: space-evenly

Es probable que estas actualizaciones requieran la actualización de bases de códigos antiguos. Sin embargo, a largo plazo, el resultado es mucho más positivo y puede esperar que su base de código se ajuste mejor a la versión web de Flexbox.

Puedes ver cómo se ven en el siguiente ejemplo de código:

importar { Vista , SafeAreaView , Texto } de 'react-native'; Exportar función predeterminada Pantalla de inicio ( ) { devolver ( Vista de área segura { /* Ejemplo de código de diseño mejorado */ } Estilo de texto ={{ margen : 10 , tamaño de fuente : 24 }} Ejemplo de código de diseño mejorado / Texto Ver estilo ={{ flexDirection : 'fila' , color de fondo : 'rojo' , margen : 10 , ancho : 200 , altura : 100 , }} Ver estilo ={{ flexDirection : 'fila-inversa' , color de fondo : 'azul' , flexión : 1 , margenIzquierdo : 50 , }} Ver estilo ={{ color de fondo : 'verde' , altura : '50%' , flexión : 1 , margenIzquierdo : 50 , }} / / Ver / Ver { /* alignContent: ejemplo de código "space-evenly" */ } Estilo de texto ={{ margen : 10 , tamaño de fuente : 24 }} alignContent : ejemplo de código "space-evenly" / Texto Ver estilo ={{ flexWrap : 'envolver' , alignContent : 'espacio uniforme' , altura : 200 , color de fondo : 'amarillo' , }} Estilo de vista ={{ ancho : 50 , alto : 50 , color de fondo : 'rojo' }} / Estilo de vista ={{ ancho : 50 , alto : 50 , color de fondo : 'azul' }} / Estilo de vista ={{ ancho : 50 , alto : 50 , color de fondo : 'verde' }} / / Ver Vista de área segura );}

El nuevo y mejorado diseño del código se puede ver en la parte superior del código, que ahora coincide con precisión con la forma en que funciona la lógica de CSS flexbox en la web y se puede ver en la mitad inferior del código.space-evenly

Debido al error en este ejemplo, el diseño se vería como la siguiente imagen para la inversión de fila:

Para obtener una representación visual de cómo se ve el código nuevo y correcto, observe la captura de pantalla a continuación en un simulador de iOS:

Además de las actualizaciones mencionadas anteriormente, React Native 0.74 también introdujo un nuevo modo sin puente que mejora la interoperabilidad y el rendimiento al reducir la sobrecarga causada por el puente de JavaScript que anteriormente generaba cuellos de botella y ralentizaciones.

La última actualización importante de la que vamos a hablar es el nuevo diseño por lotes, que trae consigo una nueva onLayoutactualización por lotes que es capaz de disminuir la cantidad de tiempo que tarda tu aplicación en renderizarse.

Podemos ver un ejemplo de código aquí:

importar {useState} de 'react'; importar { Vista , Texto , Hoja de estilos , Evento de cambio de diseño } de 'react-native'; función de exportación predeterminada CombinedWidth ( ) { const [ combinadoWidth , setCombinedWidth ] = useState número ( 0 ); const [ anchos , establecerAnchos ] = useState número []([ 0 , 0 , 0 ]); const handleChildLayout = ( evento : LayoutChangeEvent , índice : número ) = { const { ancho } = evento . evento nativo. disposición ; const nuevosAnchos = [... anchos ]; nuevoAnchos[ índice ] = ancho ; establecerAnchos ( nuevosAnchos ); establecerAnchoCombinado ( nuevosAnchos . reduce ( ( suma , anchoactual ) = suma + anchoactual , 0 ) );};devolver ( Ver estilo ={ estilos . contenedor } Estilo de texto ={ estilos . texto } Ancho combinado : { combinadoWidth }/ Texto Ver estilo ={ estilos . fila } Ver onLayout ={( evento ) = handleChildLayout ( evento , 0 )} estilo ={ estilos . caja } / Ver onLayout ={( evento ) = handleChildLayout ( evento , 1 )} estilo ={ estilos . caja } / Ver onLayout ={( evento ) = handleChildLayout ( evento , 2 )} estilo ={ estilos caja } / / Ver /. Ver );}const estilos = StyleSheet .create ( { contenedor : { flexión : 1 , justificarContenido : 'centro' , alignItems : 'centro' , }, texto : { Tamaño de fuente : 18 , margen : 10 , }, fila : { flexDirection : 'fila' , }, caja : { ancho : 50 , altura : 50 , color de fondo : 'verde' , margen : 10 , },});

Este ejemplo de código demuestra cómo determinar y mostrar rápidamente el ancho total de varios elementos secundarios dentro de un componente principal. Utilice onLayoutcambios por lotes para mantener el estado optimizado para el rendimiento y gestionar dinámicamente los cambios de diseño.

Eche un vistazo a una demostración en ejecución del código en esta captura de pantalla del simulador de iOS:

Ahora que revisamos las últimas características, cambios importantes y actualizaciones, veamos cómo se compara la implementación de flexbox de Yoga con la de CSS.

Implementación de flexbox de Yoga vs. flexbox de CSS

Yoga 3.0 fue diseñado para entornos de desarrollo móviles, por lo que está mejor optimizado cuando se utiliza en aplicaciones React Native debido a su integración con sistemas operativos móviles nativos.

Al usar Yoga 3.0 en aplicaciones React Native, es posible usar los sistemas de diseño nativos, lo que resulta en un mejor rendimiento y una reducción significativa de cálculos al crear diseños. La documentación de Yoga 3.0 sobre estilos cubre todos los estilos disponibles.

En comparación, Flexbox se utiliza principalmente para crear diseños para aplicaciones y sitios web. Flexbox funciona dentro de los navegadores web y utiliza sus motores de renderizado. Está diseñado para funcionar con HTML y CSS y destaca en estos tipos de entornos web.

Aunque Yoga 3.0 es un buen motor de diseño, existen algunas áreas y propiedades del modelo CSS flexbox que Yoga 3.0 no admite o que gestiona de forma ligeramente diferente. A continuación, veamos algunas de las diferencias.

Las diferencias entre Yoga 3.0 y CSS flexbox

Yoga 3.0 es compatible con gran parte de la API de CSS Flexbox; Sin embargo, existen algunas diferencias. Una de ellas es que las pseudoclases y pseudoelementos como y no son compatibles con Yoga 3.0; los estilos deben usarse directamente en la lógica. Algo similar ocurre con las consultas de medios, que suelen ejecutarse mediante lógica de JavaScript como , mientras que en CSS estándar todo esto se lograría en hojas de estilo.:first-child::beforeDimensions

También faltan algunas propiedades que he enumerado aquí:

• flex-basis
• flex-shorthand
• flex-wrapestafawrap-reverse
• order
• gap

En las siguientes secciones, los exploraremos con más detalle y los compararemos con sus contrapartes de CSS flexbox.

Cómo utilizarflex-basis

En CSS flexbox, la propiedad se usa para establecer el tamaño predeterminado de los elementos de una página antes de asignar el espacio restante. Yoga 3.0 no la admite y, en su lugar, utiliza las propiedades `and` junto con `and` para lograr el mismo efecto.flex-basisflex-basiswidthheightflex-growflex-shrink

Aquí se pueden ver ejemplos comparativos. En este ejemplo, vemos cómo hacerlo con CSS simple:flex-basis

. contenedor { pantalla : flex ;}. artículo {flex-base:200px; altura: 100px; fondo - color : azul claro ;}

Aquí podemos ver cómo se ve en Yoga 3.0. En este ejemplo, usamos la widthpropiedad en lugar de:flex-basis

importar { Vista , Hoja de estilos } de 'react-native'; función de exportación predeterminada FlexBasisExample ( ) { devolver ( Ver estilo = { estilos . contenedor } Ver estilo = { estilos . elemento } / / Ver );}const estilos = StyleSheet .create ( { contenedor : { flexDirection : 'fila' , justificarContenido : 'flex-start' , }, artículo : { ancho : 200 , // Utilice ancho en lugar de base flexible height: 100, backgroundColor: 'lightblue', },});

Cómo utilizarflex-shorthand

Al usar CSS flexbox, podemos usar la flexpropiedad abreviada para configurar diferentes propiedades en una sola línea de código; por ejemplo, configure grow, encogimiento y base en una sola línea como se muestra aquí:

flex: 1 0 automático;

Yoga 3.0 no admite código abreviado, lo que significa que todas las propiedades deben configurarse directamente.

Cómo utilizar conflex-wrapwrap-reverse

Con CSS Flexbox, es posible ajustar elementos en varias líneas usando, lo que permite invertir la dirección. Yoga admite, pero no puede usar.wrap-reverseflex-wrapwrap-reverse

Aquí podemos ver cómo se usa en CSS simple:

.container { display: flex; flex-wrap: wrap-reverse;}.item { ancho: 100px; alto: 100px; color de fondo: azul claro; margen: 5px;}

Como pueden ver, la sintaxis es bastante legible. Y así es como se ve al usar React Native:

importar { Vista, StyleSheet } de 'react-native'; exportar función predeterminada WrapReverseExample() { devolver ( Vista estilo={styles.container} Vista estilo={styles.item} / Vista estilo={styles.item} / Vista estilo={styles.item} / Vista estilo={styles.item} / /Vista );}const estilos = StyleSheet.create({ contenedor: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'flex-start', alignItems: 'flex-end', // Alinear los elementos al final para simular el efecto de ajuste inverso }, elemento: { ancho: 100, alto: 100, backgroundColor: 'lightblue', margen: 5, },});

En este ejemplo, tenemos que utilizar para obtener el mismo resultado.alignItems: 'flex-end',

Cómo utilizarorder

Esta orderpropiedad nos permite cambiar el orden de nuestros elementos en la página o pantalla en la versión web de Flexbox. Sin embargo, no parece ser compatible con Yoga. Veamos cómo se ve esto en el código.

Primero está nuestro ejemplo CSS, que puedes ver aquí order:

.container {display: flex;}.item1 {order: 2;ancho: 100px;alto: 100px;color de fondo: azul claro;}.item2 {order: 1;ancho: 100px;alto: 100px;color de fondo: verde claro;}

El código funciona correctamente, con cada elemento ordenado por valor numérico. Aquí está nuestro ejemplo de código de React Native:

importar { Vista, Hoja de estilos } de 'react-native'; exportar función predeterminada OrderExample() { devolver ( Estilo de vista={styles.container} Estilo de vista={styles.item1} / Estilo de vista={styles.item2} / /Vista );}const estilos = StyleSheet.create({ contenedor: { flexDirection: 'row', }, elemento1: { ancho: 100, alto: 100, color de fondo: 'azul claro', }, elemento2: { ancho: 100, alto: 100, color de fondo: 'verde claro', },});

El pedido no es compatible, por lo que no puedes cambiar el orden de los elementos.

Cómo utilizargap

En CSS Flexbox, las gappropiedades determinan el espacio entre los elementos flexibles. Esto se puede lograr usando las propiedades gap, row-gapy column-gap. Yoga solo es compatible con gap.

Comparemos ambos en nuestros ejemplos de código. Primero, nuestro ejemplo de CSS de flexbox:

.container { display: flex; gap: 20px; width: 200px; height: 250px; padding: 10px; flex-wrap: wrap;}.item { width: 100px; height: 100px; background-color: lightBlue;}

Como puedes ver, hay un espacio de 20 px para todos los elementos dentro del contenedor.

Ahora echemos un vistazo al mismo código en React Native:

importar { Vista, StyleSheet, SafeAreaView } de 'react-native'; exportar función predeterminada GapExample() { devolver ( SafeAreaView Estilo de vista={styles.container} Estilo de vista={styles.item} / Estilo de vista={styles.item} / Estilo de vista={styles.item} / Estilo de vista={styles.item} / Estilo de vista={styles.item} / Estilo de vista={styles.item} / /Vista /SafeAreaView );}const estilos = StyleSheet.create({ contenedor: { ancho: 200, alto: 250, relleno: 10, flexWrap: 'wrap', espacio: 20, }, elemento: { ancho: 100, alto: 100, backgroundColor: 'lightblue', },});

El contenedor principal también tiene un valor de 20, por la gappropiedad.

Tras revisar el código, podemos ver cómo Yoga 3.0 admite diferentes áreas del modelo CSS Flexbox, pero no todas. Para lograr los mismos resultados de diseño en dispositivos móviles, podría ser necesario probar diferentes técnicas para obtener el mismo resultado.

Conclusión

Hoy analizamos en profundidad las mejoras y actualizaciones de la última versión de React Native v0.74, que incluye la nueva API de Yoga 3.0 para CSS flexbox. Estas mejoras facilitan el desarrollo con React Native, a la vez que permiten aprovechar las funciones existentes.

Es probable que futuros desarrollos mejoren aún más React Native, consolidando su posición como una de las mejores herramientas de la industria para crear aplicaciones móviles multiplataforma. Merece la pena actualizar el código base para aprovechar las nuevas funciones disponibles en React Native v0.74, especialmente el nuevo onLayoutevento por lotes, que mejora el rendimiento al reducir los re-renderizados.

Comience a monitorear de forma proactiva sus aplicaciones React Native: pruebe LogRocket gratis.

Si quieres conocer otros artículos parecidos a Gestión de diseño de React Native con Yoga 3.0 puedes visitar la categoría Guias.