Saltar al contenido

Anuncio de React Native 0.63 con LogBox · React Native

Hoy lanzamos React Native 0.63 que se envía con LogBox activado de forma predeterminada.

Hemos escuchado comentarios frecuentes de la comunidad de que los errores y las advertencias son difíciles de depurar en React Native. Para abordar estos problemas, echamos un vistazo a todo el sistema de errores, advertencias y registros en React Native y lo rediseñamos desde cero.

LogBox es una experiencia de registro, caja amarilla y redbox completamente rediseñada en React Native. En 0.62 presentamos LogBox como opción de suscripción. En esta versión, estamos lanzando LogBox como la experiencia predeterminada en todo React Native.

LogBox aborda las quejas de que los errores y las advertencias eran demasiado detallados, mal formateados o inaccesibles centrándose en tres objetivos principales:

Para lograr estos objetivos, LogBox incluye:

Hemos reunido todas estas características en un diseño visual mejorado que es consistente entre errores y advertencias y permite paginar a través de todos los registros en una interfaz de usuario agradable.

Con este cambio, también descartamos YellowBox en favor de las API de LogBox:

En 0.63, le advertiremos cuando use estos módulos o métodos obsoletos. Actualice sus sitios de llamadas fuera de estas API antes de que se eliminen en 0.64.

Para obtener más información sobre LogBox y la depuración de react native, consulte los documentos aquí.

React Native está diseñado para permitir que las aplicaciones cumplan con las expectativas de los usuarios de la plataforma. Esto incluye evitar los “indicios”, pequeñas cosas que revelan que la experiencia se creó con React Native. Una fuente importante de estos indicios han sido los componentes Touchable: Button, TouchableWithoutFeedback, TouchableHighlight, TouchableOpacity, TouchableNativeFeedbacky TouchableBounce. Estos componentes hacen que su aplicación sea interactiva al permitirle proporcionar comentarios visuales a las interacciones del usuario. Sin embargo, debido a que incluyen estilos y efectos integrados que no coinciden con la interacción de la plataforma, los usuarios pueden saber cuándo se escriben las experiencias con React Native.

Además, a medida que React Native ha crecido y nuestro nivel de aplicaciones de alta calidad ha subido, estos componentes no han crecido con él. React Native ahora es compatible con plataformas como Web, Desktop y TV, pero ha faltado soporte para modalidades de entrada adicionales. React Native debe admitir experiencias de interacción de alta calidad en todas las plataformas.

Para abordar estos problemas, enviamos un nuevo componente central llamado Pressable. Este componente se puede utilizar para detectar varios tipos de interacciones. La API fue diseñada para proporcionar acceso directo al estado actual de interacción sin tener que mantener el estado manualmente en un componente principal. También fue diseñado para permitir que las plataformas extiendan sus capacidades para incluir desplazamiento, desenfoque, enfoque y más. Esperamos que la mayoría de la gente construya y comparta componentes utilizando Pressable bajo el capó en lugar de confiar en la experiencia predeterminada de algo como TouchableOpacity.

importar { Pressable, Texto } desde ‘reaccionar-nativo’;

color de fondo: presionado ? ‘lightkyblue’ : ‘blanco’

Texto estilo={estilos.texto}>Presionarme!Texto>

Pressable>;

Un ejemplo sencillo de un componente prensible en acción

Puede obtener más información al respecto en la documentación.

Colores nativos (PlatformColor, DynamicColorIOS) #

Cada plataforma nativa tiene el concepto de colores definidos por el sistema. Colores que responden automáticamente a la configuración del tema del sistema, como el modo Claro u Oscuro, la configuración de accesibilidad, como el modo de alto contraste, e incluso su contexto dentro de la aplicación, como los rasgos de una vista o ventana contenedora.

Si bien es posible detectar algunas de estas configuraciones a través de la API y / o configurar sus estilos en consecuencia, tales abstracciones no solo son costosas de desarrollar, sino que simplemente se aproximan a la apariencia de los colores nativos. Estas inconsistencias son particularmente notables cuando se trabaja en una aplicación híbrida, donde los elementos React Native coexisten junto a los nativos.

React Native ahora proporciona una solución lista para usar para usar estos colores del sistema. PlatformColor() es una nueva API que se puede usar como cualquier otro color en React Native.

Por ejemplo, en iOS, el. Eso se puede usar en React Native con PlatformColor Me gusta esto:

importar { Texto, PlatformColor } desde ‘reaccionar-nativo’;

Esta es una etiqueta

Texto>;

Establece el color del componente Text en labelColor como lo define iOS.

Android, por otro lado, proporciona colores como colorButtonNormal. Puedes usar este color en React Native con:

importar { Ver, Texto, PlatformColor } desde ‘reaccionar-nativo’;

color de fondo: PlatformColor(‘? attr / colorButtonNormal’)

Texto>Esto está coloreado como un botón!Texto>

Ver>;

Establece el color de fondo del componente View en colorButtonNormal según lo definido por Android.

Puedes aprender más sobre PlatformColor de la documentación. También puede consultar los ejemplos de código reales presentes en el RNTester.

DynamicColorIOS es una API solo para iOS que le permite definir qué color usar en modo claro y oscuro. Similar a PlatformColor, esto se puede usar en cualquier lugar donde pueda usar colores. DynamicColorIOS usa iOS colorWithDynamicProvider bajo el capó.

importar { Texto, DynamicColorIOS } desde ‘reaccionar-nativo’;

constante customDynamicTextColor = DynamicColorIOS({

Texto estilo={{ color: customDynamicTextColor }}>

Este color cambia automáticamente según el tema del sistema!

Texto>;

Cambia el color del texto según el tema del sistema.

Puedes aprender más sobre DynamicColorIOS de la documentación.

Eliminación de la compatibilidad con iOS 9 y Node.js 8 #

Después de más de cuatro años desde su lanzamiento, vamos a dejar de admitir iOS 9. Este cambio nos permitirá avanzar más rápido al poder reducir la cantidad de comprobaciones de compatibilidad que deben colocarse en el código nativo para detectar si una característica determinada fue compatible con una determinada versión de iOS. Con su cuota de mercado del 1%, no debería tener mucho impacto negativo en sus clientes.

Al mismo tiempo, estamos eliminando el soporte para el Nodo 8. Su ciclo de mantenimiento LTS expiró en diciembre de 2019. El LTS actual es el Nodo 10 y ahora es la versión a la que nos dirigimos. Si todavía está utilizando el Nodo 8 para el desarrollo de aplicaciones React Native, le recomendamos que actualice para recibir las últimas correcciones y actualizaciones de seguridad.

Otras mejoras notables #

¡Gracias a los cientos de colaboradores que ayudaron a hacer posible 0.63!

Un agradecimiento especial a Rick Hanlon por ser autor de la sección sobre LogBox y Eli White por ser el autor de la Pressable parte de este artículo.

Para ver todas las actualizaciones, eche un vistazo al registro de cambios 0.63.

Este contenido se publicó originalmente aquí.