Saltar al contenido principal

React Native 0.76: Nueva arquitectura por defecto, React Native DevTools y más

· 13 min de lectura
Blake Friedman
Blake Friedman
Software Engineer @ Meta
Riccardo Cipolleschi
Riccardo Cipolleschi
Software Engineer @ Meta
Frank Calise
Frank Calise
Software Engineer @ Infinite Red
Gabriel Donadel Dall'Agnol
Gabriel Donadel Dall'Agnol
Software Engineer @ Expo
Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

¡Hoy nos complace anunciar el lanzamiento de React Native 0.76!

Este es un hito importante para React Native, ya que habilitamos la Nueva Arquitectura por defecto e introducimos React Native DevTools. Esto es el resultado de 6 años de trabajo duro de nuestro equipo, junto con el apoyo de nuestra increíble comunidad de desarrolladores.

Lo más destacado​

Cambios importantes​

Lo más destacado​

Nueva arquitectura de React Native por defecto​

A partir de React Native 0.76, la Nueva Arquitectura está habilitada por defecto en tus proyectos. La Nueva Arquitectura es una reescritura de las partes internas de React Native para permitir a los desarrolladores crear aplicaciones nativas de alta calidad usando React.

Hoy nos complace declarar que la Nueva Arquitectura está lista para uso en producción.

Este cambio es un hito en la evolución de React Native, y te invitamos a leer la publicación dedicada para entender qué incluye la Nueva Arquitectura y cómo moldeará el futuro de React Native: La Nueva Arquitectura está aquí.

React Native DevTools​

Interfaz de React Native DevTools

Lanzamos la primera versión estable de React Native DevTools, nuestra nueva experiencia de depuración predeterminada.

Queremos que las herramientas que usas para depurar React en todas las plataformas sean confiables, familiares, simples y cohesivas. React Native DevTools cumple con estos principios: herramientas de desarrollo alineadas con navegadores que están profundamente integradas con React Native. Las características clave incluyen:

  • Herramientas familiares y alineadas con la web: Un depurador completo basado en Chrome DevTools con puntos de interrupción confiables, valores de seguimiento, depuración paso a paso, inspección de pila y una consola JavaScript avanzada. Estas funciones principales ahora funcionan de manera confiable y durante recargas.

  • React DevTools mejorado e integrado: El Inspector de Componentes y el Profiler integrados funcionan perfectamente, con resaltado de componentes más rápido y confiable.

  • Experiencia de usuario mejorada: Verás una nueva superposición Pausado en el depurador que indica claramente cuando tu aplicación está detenida en un punto de interrupción. Las advertencias en LogBox ahora se muestran como resumen y se ocultan cuando DevTools está conectado.

  • Comportamiento de reconexión corregido: Los puntos de interrupción de JavaScript ahora funcionan confiablemente durante recargas y cuando DevTools se desconecta y vuelve a conectar. DevTools incluso puede reconectarse a la misma aplicación después de una reconstrucción nativa.

  • Lanzamiento instantáneo — React Native DevTools está listo por defecto sin configuración. Ábrelo desde el menú de desarrollo dentro de la aplicación o mediante j para depurar en el servidor CLI, que ahora admite múltiples emuladores y dispositivos.

React Native DevTools es fundamentalmente diferente de nuestras opciones de depuración anteriores, incluso diferente de la experiencia del Depurador Experimental que se lanzó inicialmente en la versión 0.73. Cambia a una nueva pila de depuración de backend que hemos reconstruido durante el último año. Esto significa que la compatibilidad con herramientas anteriores ha cambiado, y también puedes esperar una experiencia mucho más confiable de extremo a extremo. Planeamos construir sobre esta nueva pila para implementar de manera confiable más funciones en el futuro, como los paneles de Rendimiento y Red.

Eliminación gradual de registros en Metro​

En nuestra próxima versión, eliminaremos los registros reenviados en Metro para alinearnos con las herramientas modernas de navegador y eliminar integraciones de depuración antiguas. En su lugar, usa el panel de Consola completo de React Native DevTools para los registros. Consulta más en nuestras Preguntas frecuentes.

Enlaces

Resolución más rápida de Metro​

Hemos implementado varias mejoras de rendimiento en el resolvedor de Metro, el componente responsable de encontrar un módulo a partir de una ruta de importación, haciéndolo aproximadamente 15 veces más rápido. Esto mejora el rendimiento general de Metro, particularmente para compilaciones en caliente, que hemos visto aproximadamente 4 veces más rápidas.

Propiedades de estilo Box Shadow y Filter​

Hemos añadido dos propiedades de estilo exclusivas de la Nueva Arquitectura en la versión 0.76: boxShadow y filter. Ambas propiedades existen en la web, y el equipo se adhiere a las especificaciones cuando es posible para que estas propiedades sean predecibles, familiares y más fáciles de adoptar (consulta las secciones de limitaciones y desviaciones de especificaciones para las excepciones). Como resultado, puedes consultar la documentación web para entender completamente cómo funcionan, pero hay algunas diferencias importantes que se indican a continuación.

boxShadow​

boxShadow añade una sombra a un elemento, con capacidad para controlar la posición, color, tamaño y desenfoque de la sombra. Consulta la documentación de MDN para obtener una descripción completa de cada uno de estos argumentos, junto con un ejemplo interactivo para probarlos. A continuación se muestran algunos ejemplos de las sombras que puedes crear.

Nueva propiedad de estilo boxShadow

boxShadow puede tomar una cadena (que imita la sintaxis CSS) u objetos JS que pueden incrustar variables. Por ejemplo, la cadena ‘5 5 5 0 rgba(255, 0, 0, 0.5)’ y el objeto {offsetX: 5, offsetY: 5, blurRadius: 5, spreadDistance: 0, color: ‘rgba(255, 0, 0, 0.5)’} producirían la misma sombra.

La funcionalidad de sombra anterior tenía algunas limitaciones que ahora aborda boxShadow:

  • No funciona en Android

  • No admite inset

  • No tiene spread

  • No funciona en Views si no hay un color de fondo

  • Es una propiedad separada, por lo que no puede compartir la misma sintaxis web

Limitaciones y desviaciones de la especificación​

  • El color de sombra predeterminado es negro, no el color del elemento padre

  • Las sombras normales de Android son compatibles a partir de Android 9+

  • Las sombras internas (inset) de Android son compatibles a partir de Android 10+

filter​

filter aplica filtros gráficos a un elemento. Incluye tanto filtros de color (para modificar brillo, saturación y tono) como filtros no cromáticos (para añadir desenfoques y sombras). Consulta la documentación de MDN para conocer cada función de filtro, junto con ejemplos interactivos. Aquí verás una imagen de perrito caliente con diferentes filtros aplicados.

Filters demonstration
From left to right: no filter, saturate filter, blur filter, invert filter

Al igual que boxShadow, filter puede recibir una cadena (que imita la sintaxis CSS) o un array de objetos JS que pueden incluir variables. Por ejemplo, la cadena ‘saturate(0.5) grayscale(0.25)’ y el array [{saturate: 0.5}, {grayscale: 0.25}] producirían el mismo filtro. filter incluye un valor dropShadow que difiere ligeramente de boxShadow. La principal diferencia es que dropShadow funciona como máscara alfa: la sombra solo se proyectará desde píxeles con componente alfa distinto de cero. boxShadow, en cambio, proyecta alrededor del cuadro de borde del elemento, incluso si está vacío. Además, dropShadow carece de parámetro de distancia de expansión y no admite sombras internas (inset).

Limitaciones y desviaciones de la especificación​

  • iOS filter solo admite brillo y opacidad

  • iOS filter no afecta sombras, contornos u otros elementos gráficos fuera de los límites del elemento

  • blur y drop-shadow en Android solo son compatibles a partir de Android 12+

  • filter implica overflow: hidden, por lo que los elementos hijos de un elemento con un filter se recortarán si se posicionan fuera de los límites del padre.

Cambios importantes​

Eliminación de la dependencia de @react-native-community/cli​

Como compartimos anteriormente en la versión 0.75, nuestra visión es que React Native sea agnóstico de frameworks. Por lo tanto, completamos el trabajo para eliminar @react-native-community/cli como dependencia directa de React Native.

Desacoplar React Native de la CLI nos permite publicar ambos proyectos de forma independiente y definir mejor sus responsabilidades.

Si usas la CLI en tu flujo de trabajo, asegúrate de añadir explícitamente la dependencia en tu package.json:

//…
  “devDependencies”: {
   // …
+  “@react-native-community/cli”: “15.0.0”,
+  "@react-native-community/cli-platform-android": “15.0.0”,
+  "@react-native-community/cli-platform-ios": “15.0.0”,
  },

Las aplicaciones de Android son ~3.8Mb más pequeñas gracias a la fusión de bibliotecas nativas​

React Native 0.76 reduce el número de bibliotecas nativas al consolidar gran parte del código en una sola biblioteca: libreactnative.so.

Este cambio reduce el tamaño de las aplicaciones y mejora el rendimiento al iniciar en Android. Según nuestras pruebas, el tamaño de la aplicación se reduce en ~3.8MB (20% del total) y el tiempo medio de inicio disminuye ~15ms (~8%) (fuente).

Por otro lado, este es un cambio importante tanto para desarrolladores de aplicaciones como de bibliotecas.

Los desarrolladores de aplicaciones deberán actualizar el método onCreate de su aplicación de la siguiente manera:

+import com.facebook.react.soloader.OpenSourceMergedSoMapping
import com.facebook.soloader.SoLoader

class MainApplication : Application(), ReactApplication {

  override fun onCreate() {
    super.onCreate()
+   SoLoader.init(this, OpenSourceMergedSoMapping)
-   SoLoader.init(this, false)
  }
}

Este cambio es necesario para cargar correctamente libreactnative.so y está incluido en el upgrade-helper.

Los autores de bibliotecas no se verán afectados por este cambio, a menos que tengan código personalizado en C++.

Para un análisis técnico detallado de este cambio y sugerencias para autores de bibliotecas, puedes leer más en la publicación dedicada.

Actualizaciones de los requisitos mínimos de SDK para iOS y Android​

Hemos actualizado nuestras versiones mínimas de plataforma y SDK:

  • iOS: de 13.4 a 15.1

  • Android: de SDK 23 a SDK 24 (Android 7)

Este cambio se anunció a principios de año cuando se lanzó la versión 0.75 publicada. Para más contexto, consulta las publicaciones dedicadas para Android e iOS.

Otros cambios importantes​

  • Animación

    • Se dejaron de enviar actualizaciones de estado a React en animaciones en bucle. Esto causaba re-renderizados innecesarios con animaciones repetitivas.

  • devtools:

    • Se eliminaron las pestañas de rendimiento (perf) y red del panel Inspector en la Nueva Arquitectura. (RFC)

  • Motor de texto

    • Ahora se usa siempre AttributedStringBox en lugar de AttributedString en TextLayoutManager

Android​

  • Renderización:
    • Los fondos de las vistas ya no son directamente ReactViewBackgroundDrawable ni CSSBackgroundDrawable

iOS​

  • turbomodule
    • Se eliminó la macro RCT_EXPORT_CXX_MODULE_EXPERIMENTAL para el autovinculado de módulos Cxx puros.

Agradecimientos​

React Native 0.76 contiene más de 1070 commits de 156 colaboradores. ¡Gracias por todo su arduo trabajo!

Agradecemos a los autores adicionales que contribuyeron a documentar características en esta publicación:

Actualización a la versión 0.76​

Usa el React Native Upgrade Helper para ver cambios de código entre versiones de React Native en proyectos existentes, además de la documentación de actualización.

Si utilizas Expo, React Native 0.76 será compatible con Expo SDK 52.

Si necesitas crear un nuevo proyecto usando la CLI, puedes ejecutar este comando:

npx @react-native-community/cli@latest init MyProject --version latest
información

La versión 0.76 es ahora la última versión estable de React Native y la 0.73.x pasa a no ser compatible. Para más información, consulta la política de soporte de React Native. Nuestro objetivo es publicar una actualización final de fin de vida para la 0.73 en un futuro próximo.