Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
¡Feliz año nuevo a todos! Hoy anunciamos el lanzamiento más reciente de React Native, la versión 0.67.0, junto con algunas actualizaciones del proceso de publicación en las que hemos estado trabajado durante los últimos meses.
Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
Hoy lanzamos React Native v0.66 con soporte para Android 12 e iOS 15, junto con correcciones y actualizaciones generales.
Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
Hoy lanzamos React Native versión 0.65 con una nueva versión de Hermes, mejoras en accesibilidad, actualizaciones de paquetes y más.
Hermes, la máquina virtual JavaScript de código abierto de Facebook optimizada para React Native, se ha actualizado a la versión 0.8.1. Algunas características destacadas en esta versión son:
Un nuevo recolector de basura concurrente llamado "Hades" que reduce los tiempos de pausa hasta 30 veces en dispositivos de 64 bits. En Facebook, observamos que esto mejora algunas cargas de trabajo intensivas en CPU entre un 20% y 50%. Puedes aprender más sobre Hades aquí.
La API de Internacionalización de ECMAScript (ECMA-402 o Intl) ahora está integrada en Hermes para Android y activada por defecto, con solo 57-62K de sobrecarga por API (comparado con los 6MiB de JSC). Con este cambio, los usuarios de Hermes ya no necesitan polyfills de localización. ¡Un gran agradecimiento a @mganandraj y otros colaboradores en Microsoft por impulsar esta implementación!
Hermes en iOS ahora soporta Macs con Apple M1 y Mac Catalyst!
Mejoras de memoria incluyendo compresión de SMI (Small Integers) y punteros que redujeron el heap de JS en un 30%.
Cambios en Function.prototype.toString que solucionaron una caída de rendimiento por detección incorrecta de características y soportan casos de inyección de código fuente.
Puedes consultar el registro completo de cambios de Hermes aquí.
¡Sigue estos pasos para habilitar Hermes en tu aplicación si aún no lo has hecho y aprovecha estas nuevas características y mejoras!
El año pasado Facebook asumió el compromiso GAAD para mejorar la accesibilidad en React Native. ¡La versión 0.65 comparte los resultados de este compromiso y otros avances en accesibilidad! Algunos cambios destacados incluyen:
Posibilidad de especificar valores de alto contraste claro y oscuro para iOS. Consulta la documentación para más detalles.
Se añadió la API getRecommendedTimeoutMillis en Android. Esto expone el tiempo de espera predeterminado preferido del usuario según las opciones de accesibilidad de Android, diseñado para usuarios que necesiten tiempo adicional para revisar o alcanzar controles.
Correcciones generales para asegurar que TalkBack/VoiceOver anuncien correctamente estados de UI como disabled (deshabilitado) y unselected (no seleccionado) en componentes.
¡Puedes seguir o contribuir a nuestros problemas pendientes de accesibilidad aquí!
Ahora se requiere react-native-codegen versión 0.0.7 como devDependency en el package.json.
JCenter ha sido discontinuado y ahora es de solo lectura. Hemos eliminado JCenter como repositorio de Maven y actualizado las dependencias para usar MavenCentral y Jitpack.
Actualización de OkHttp de la versión 3 a la 4.9.1. Consulta Actualización a OkHttp 4 para más detalles sobre los cambios.
Actualización a Flipper 0.93 para soportar Xcode 12.5. Consulta el registro de cambios de Flipper aquí.
Soporte para Android Gradle Plugin 7
Apple Silicon requiere una solución alternativa para el enlazador. Consulta la nota de @mikehardy sobre esto.
Esta versión incluye más de 1100 commits de 61 colaboradores. ¡Gracias a todos los que han contribuido y apoyado este lanzamiento! Puedes consultar el registro de cambios completo aquí.
Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
Hoy lanzamos React Native 0.64 que incluye soporte para Hermes en iOS.
Hermes es un motor JavaScript de código abierto optimizado para ejecutar React Native. Mejora el rendimiento reduciendo el uso de memoria, disminuyendo el tamaño de descarga y acortando el tiempo hasta que la app se vuelve utilizable o "tiempo hasta la interacción" (TTI).
Con esta versión, nos complace anunciar que ahora también puedes usar Hermes para desarrollo en iOS. Para activarlo, establece hermes_enabled como true en tu Podfile y ejecuta pod install.
use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` and then install pods
:hermes_enabled => true
)
Ten en cuenta que el soporte de Hermes en iOS aún está en etapa temprana. Lo mantenemos como opción mientras realizamos más pruebas de rendimiento. Te animamos a probarlo en tus aplicaciones y contarnos tu experiencia.
Inline Requires es una opción de configuración de Metro que mejora el tiempo de inicio al retrasar la ejecución de módulos JavaScript hasta que se usan, en lugar de hacerlo al inicio.
Esta función ha existido y sido recomendada durante años como opción configurable, listada en la sección de Rendimiento de nuestra documentación. Ahora la activamos por defecto en nuevas aplicaciones para facilitar React Native rápido sin configuración adicional.
Inline Requires es una transformación de Babel que toma importaciones de módulos y las convierte en inline. Por ejemplo, transforma esta llamada de importación desde la parte superior del archivo hasta donde se utiliza.
Antes:
import {MyFunction} from 'my-module';
const MyComponent = props => {
const result = MyFunction();
return <Text>{result}</Text>;
};
Después:
const MyComponent = props => {
const result = require('my-module').MyFunction();
return <Text>{result}</Text>;
};
Más información sobre Inline Requires está disponible en la documentación de Rendimiento.
El último año Facebook patrocinó la beca Major League Hacking, apoyando contribuciones a React Native. Jessie Nguyen y Saphal Patro añadieron la capacidad de usar la pestaña Performance en Chrome DevTools para visualizar la ejecución de tu aplicación cuando usa Hermes.
Para más detalles, consulta la nueva página de documentación.
Hemos añadido soporte para Proxy en Hermes, permitiendo compatibilidad con proyectos populares como react-native-firebase y mobx. Si usas estos paquetes, ahora puedes migrar a Hermes.
Planeamos hacer Hermes el motor JavaScript predeterminado para Android en próximas versiones, por lo que estamos resolviendo problemas pendientes. Por favor, abre un issue en el repositorio de Hermes en GitHub si encuentras obstáculos para adoptarlo.
React 17 no incluye nuevas funciones para desarrolladores ni cambios importantes. Para aplicaciones React Native, el cambio principal es un nuevo transformador JSX que elimina la necesidad de importar React para usar JSX.
Más información sobre React 17 está disponible en el blog de React.
Eliminado soporte para niveles de API Android 16-20. La app de Facebook consistentemente elimina soporte para versiones con uso suficientemente bajo. Como la app de Facebook ya no soporta estas versiones y es la principal superficie de prueba de React Native, también eliminamos el soporte.
Se requiere Xcode 12 y CocoaPods 1.10
El soporte mínimo de Node se ha incrementado de 10 a Node 12
Flipper actualizado a la versión 0.75.1
¡Agradecemos a los cientos de colaboradores que hicieron posible la versión 0.64! El registro de cambios de la 0.64 incluye todas las modificaciones de esta versión.
Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
Hoy lanzamos React Native 0.63 que incluye LogBox activado por defecto.
Hemos recibido comentarios frecuentes de la comunidad indicando que los errores y advertencias son difíciles de depurar en React Native. Para abordar estos problemas, revisamos todo el sistema de errores, advertencias y logs en React Native y lo rediseñamos desde cero.
LogBox es una experiencia completamente rediseñada de redbox, yellowbox y registro de logs en React Native. En la versión 0.62 presentamos LogBox como opcional. En este lanzamiento, implementamos LogBox como experiencia predeterminada en todo React Native.
LogBox aborda las quejas sobre errores y advertencias demasiado verbosos, mal formateados o inaccionables centrándose en tres objetivos principales:
Conciso: Los logs deben proporcionar la mínima información necesaria para depurar un problema.
Formateado: Los logs deben estar estructurados para que puedas encontrar rápidamente la información que necesitas.
Accionable: Los logs deben ser prácticos para que puedas resolver el problema y continuar.
Para lograr estos objetivos, LogBox incluye:
Notificaciones de logs: Hemos rediseñado las notificaciones de advertencias y añadido soporte para errores, haciendo que todos los mensajes de console.warn y console.log aparezcan como notificaciones en lugar de cubrir tu aplicación.
Marcos de código: Cada error y advertencia ahora incluye un marco de código que muestra el código fuente del log directamente en la app, permitiéndote identificar rápidamente el origen del problema.
Pilas de componentes: Todas las pilas de componentes ahora se extraen de los mensajes de error y se colocan en su propia sección con los tres primeros marcos visibles. Esto te da un espacio único y consistente para obtener información de marcos de pila sin saturar el mensaje del log.
Contracción de marcos de pila: Por defecto, ahora contraemos los marcos de pila de llamada no relacionados con el código de tu aplicación para que puedas ver rápidamente el problema sin revisar internos de React Native.
Formateo de errores de sintaxis: Hemos mejorado el formato para errores de sintaxis y añadido marcos de código con resaltado de sintaxis para que puedas ver el origen del error, corregirlo y continuar programando sin que React Native interfiera.
Hemos integrado todas estas características en un diseño visual mejorado, consistente entre errores y advertencias, que permite navegar por todos los logs en una interfaz única y agradable.
Con este cambio también estamos dejando obsoleta YellowBox en favor de las APIs de LogBox:
LogBox.ignoreLogs(): Esta función reemplaza a YellowBox.ignoreLogs([]) como forma de silenciar logs que coincidan con las cadenas o expresiones regulares dadas.
LogBox.ignoreAllLogs(): Esta función reemplaza a console.disableYellowBox como forma de desactivar notificaciones de errores o advertencias. Nota: esto solo desactiva las notificaciones; los errores no capturados aún abrirán un LogBox a pantalla completa.
En la versión 0.63, mostraremos advertencias al usar estos módulos o métodos obsoletos. Por favor, actualiza tus puntos de llamada de estas APIs antes de que se eliminen en la versión 0.64.
Para más información sobre LogBox y depuración en React Native, consulta la documentación aquí.
React Native se creó para que las aplicaciones cumplan con las expectativas de los usuarios en cada plataforma. Esto incluye evitar "indicios": pequeños detalles que revelan que la experiencia fue construida con React Native. Una fuente importante de estos indicios han sido los componentes táctiles: Button, TouchableWithoutFeedback, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback y TouchableBounce. Estos componentes hacen que tu aplicación sea interactiva al permitirte proporcionar retroalimentación visual a las interacciones del usuario. Sin embargo, como incluyen estilos y efectos incorporados que no coinciden con la interacción nativa de la plataforma, los usuarios pueden detectar cuando las experiencias están escritas con React Native.
Además, a medida que React Native ha evolucionado y nuestros estándares para aplicaciones de alta calidad han aumentado, estos componentes no han evolucionado con él. React Native ahora admite plataformas como Web, Escritorio y TV, pero ha carecido de soporte para modalidades de entrada adicionales. React Native necesita ofrecer experiencias de interacción de alta calidad en todas las plataformas.
Para abordar estos problemas, presentamos un nuevo componente central llamado Pressable. Este componente puede detectar varios tipos de interacciones. Su API fue diseñada para proporcionar acceso directo al estado actual de la interacción sin necesidad de mantener manualmente el estado en un componente padre. También se diseñó para permitir que las plataformas amplíen sus capacidades e incluyan hover, blur, focus y más. Esperamos que la mayoría de las personas construyan y compartan componentes que utilicen Pressable internamente, en lugar de depender de la experiencia predeterminada de componentes como TouchableOpacity.
import {Pressable, Text} from 'react-native';
<Pressable
onPress={() => {
console.log('pressed');
}}
style={({pressed}) => ({
backgroundColor: pressed ? 'lightskyblue' : 'white',
})}>
<Text style={styles.text}>Press Me!</Text>
</Pressable>;
A simple example of a Pressable component in action
Puedes obtener más información en la documentación.
Cada plataforma nativa tiene el concepto de colores definidos por el sistema. Son colores que responden automáticamente a configuraciones del sistema como modo Claro u Oscuro, ajustes de accesibilidad como modo Alto Contraste, e incluso su contexto dentro de la aplicación como las características de una vista o ventana contenedora.
Si bien es posible detectar algunas de estas configuraciones mediante la API Appearance y/o AccessibilityInfo y ajustar los estilos en consecuencia, tales abstracciones no solo son costosas de desarrollar sino que aproximan la apariencia de los colores nativos. Estas inconsistencias son particularmente notorias en aplicaciones híbridas, donde los elementos de React Native coexisten junto a los nativos.
React Native ahora ofrece una solución lista para usar estos colores del sistema. PlatformColor() es una nueva API que puede usarse como cualquier otro color en React Native.
Por ejemplo, en iOS, el sistema proporciona un color llamado labelColor. Puede usarse en React Native con PlatformColor así:
import {Text, PlatformColor} from 'react-native';
<Text style={{color: PlatformColor('labelColor')}}>
This is a label
</Text>;
Sets the color of the Text component to labelColor as defined by iOS.
Android, por otro lado, proporciona colores como colorButtonNormal. Puedes usar este color en React Native con:
import {View, Text, PlatformColor} from 'react-native';
<View
style={{
backgroundColor: PlatformColor('?attr/colorButtonNormal'),
}}>
<Text>This is colored like a button!</Text>
</View>;
Sets the background color of the View component to colorButtonNormal as defined by Android.
Puedes obtener más información sobre PlatformColor en la documentación. También puedes consultar los ejemplos de código en RNTester.
DynamicColorIOS es una API exclusiva de iOS que te permite definir qué color usar en modo claro y oscuro. Similar a PlatformColor, puede usarse en cualquier lugar donde se usen colores. DynamicColorIOS utiliza internamente colorWithDynamicProvider de iOS.
import {Text, DynamicColorIOS} from 'react-native';
const customDynamicTextColor = DynamicColorIOS({
dark: 'lightskyblue',
light: 'midnightblue',
});
<Text style={{color: customDynamicTextColor}}>
This color changes automatically based on the system theme!
</Text>;
Changes the text color based on the system theme
Puedes obtener más información sobre DynamicColorIOS en la documentación.
Después de más de cuatro años desde su lanzamiento, eliminamos el soporte para iOS 9. Este cambio nos permitirá avanzar más rápido al reducir las comprobaciones de compatibilidad necesarias en el código nativo para detectar si una función era compatible con cierta versión de iOS. Con su cuota de mercado del 1%, no debería tener un impacto negativo significativo en tus usuarios.
Al mismo tiempo, estamos eliminando el soporte para Node 8. Su ciclo de mantenimiento LTS expiró en diciembre de 2019. La versión LTS actual es Node 10 y ahora es la versión que estamos utilizando como objetivo. Si aún usas Node 8 para el desarrollo de aplicaciones React Native, te recomendamos actualizar para recibir todas las correcciones de seguridad y actualizaciones más recientes.
Soporte para renderizar <View /> dentro de <Text /> sin tamaño explícito: Ahora puedes renderizar cualquier <View /> dentro de cualquier componente <Text /> sin establecer explícitamente su ancho y alto, algo que no siempre era posible. En versiones anteriores de React Native, esto resultaba en un RedBox.
Cambio de LaunchScreen en iOS de xib a storyboard: A partir del 30 de abril de 2020, todas las aplicaciones enviadas a App Store deben usar un storyboard de Xcode para proporcionar la pantalla de inicio, y todas las apps para iPhone deben admitir todas las pantallas de iPhone. Este cambio ajusta la plantilla predeterminada de React Native para cumplir con este requisito.
¡Agradecemos a los cientos de colaboradores que hicieron posible la versión 0.63!
Agradecimientos especiales a Rick Hanlon por escribir la sección sobre LogBox y a Eli White por redactar la parte de Pressable en este artículo.
Para ver todas las actualizaciones, consulta el registro de cambios de la versión 0.63.
Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
Hoy lanzamos React Native versión 0.62 que incluye soporte para Flipper de forma predeterminada.
Este lanzamiento ocurre en medio de una pandemia global. Publicamos esta versión hoy para respetar el trabajo de cientos de colaboradores que hicieron posible este lanzamiento y evitar que quede demasiado rezagado respecto a la rama principal. Por favor, consideren la capacidad reducida de los colaboradores para ayudar con problemas y prepárense para retrasar la actualización si es necesario.
Flipper es una herramienta de desarrollo para depurar aplicaciones móviles. Es popular en las comunidades de Android e iOS, y en esta versión hemos habilitado su soporte por defecto para aplicaciones nuevas y existentes de React Native.
Flipper proporciona las siguientes funciones listas para usar:
Acciones de Metro: Recarga la aplicación y activa el Menú de Desarrollo desde la barra de herramientas.
Reporte de Fallos: Visualiza informes de fallos desde dispositivos Android e iOS.
React DevTools: Usa la versión más reciente de React DevTools junto con todas tus otras herramientas.
Inspector de Red: Visualiza todas las solicitudes de red realizadas por las aplicaciones del dispositivo.
Registros de Metro y Dispositivo: Visualiza, busca y filtra todos los registros tanto de Metro como del dispositivo.
Inspector de Diseño Nativo: Visualiza y edita el diseño nativo generado por el renderizador de React Native.
Inspectores de Base de Datos y Preferencias: Visualiza y edita las bases de datos y preferencias del dispositivo.
Adicionalmente, dado que Flipper es una plataforma extensible, proporciona un mercado que obtiene plugins de NPM para que puedas publicar e instalar plugins personalizados específicos para tus flujos de trabajo. Consulta los plugins disponibles aquí.
Para más información, visita la documentación de Flipper.
Hemos añadido un nuevo módulo Appearance para proporcionar acceso a las preferencias de apariencia del usuario, como su esquema de color preferido (claro u oscuro).
const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
// Use dark color scheme
}
También hemos añadido un hook para suscribirse a actualizaciones de estado de las preferencias del usuario:
import {Text, useColorScheme} from 'react-native';
const MyComponent = () => {
const colorScheme = useColorScheme();
return <Text>useColorScheme(): {colorScheme}</Text>;
};
Consulta la documentación de Appearance y useColorScheme para más información.
Como parte de nuestro esfuerzo Lean Core y para alinear Apple TV con otras plataformas como React Native Windows y React Native macOS, hemos comenzado a eliminar el código específico de Apple TV del núcleo.
De ahora en adelante, el soporte para Apple TV en React Native se mantendrá en react-native-community/react-native-tvos junto con el paquete NPM correspondiente react-native-tvos. Este es un fork completo del repositorio principal, con solo los cambios necesarios para soportar Apple TV.
Los lanzamientos de react-native-tvos se basarán en la versión pública de React Native. Para este lanzamiento 0.62 de react-native, actualiza los proyectos de Apple TV para usar react-native-tvos 0.62.
Cuando se lanzó la versión 0.61, la comunidad presentó una nueva herramienta de asistente de actualización para ayudar a los desarrolladores a actualizar a nuevas versiones de React Native. El asistente muestra un diff de cambios desde tu versión actual hasta la versión objetivo, permitiéndote ver los cambios necesarios para tu actualización específica.
Incluso con esta herramienta, surgen problemas al actualizar. Hoy presentamos más soporte dedicado para actualizaciones al anunciar Upgrade-Support. Upgrade Support es un rastreador de problemas de GitHub donde los usuarios pueden enviar problemas específicos sobre la actualización de sus proyectos para recibir ayuda de la comunidad.
Siempre estamos trabajando para mejorar la experiencia de actualización, y esperamos que estas herramientas brinden a los usuarios el soporte que necesitan en casos extremos que aún no hemos cubierto.
LogBox: Estamos agregando la nueva experiencia de errores y advertencias de LogBox como opción; para habilitarla, añade require('react-native').unstable_enableLogBox() a tu archivo index.js.
React DevTools v4: Este cambio incluye una actualización a las últimas React DevTools que ofrecen mejoras significativas de rendimiento, una experiencia de navegación mejorada y soporte completo para React Hooks.
Mejoras de accesibilidad: Hemos realizado mejoras en accesibilidad incluyendo la adición de accessibilityValue, props faltantes en Touchables, eventos de accesibilidad onSlidingComplete accesibilidad, y cambiar el rol predeterminado del componente Switch de "button" a "switch".
Eliminación de PropTypes: Estamos eliminando propTypes de los componentes principales para reducir el impacto en el tamaño de la aplicación del núcleo de React Native y favorecer sistemas de tipos estáticos que se verifican en tiempo de compilación en lugar de en tiempo de ejecución.
Eliminación de accessibilityStates: Hemos eliminado la propiedad obsoleta accessibilityStates en favor de la nueva prop accessibilityState, que es una forma semánticamente más rica para que los componentes describan información sobre su estado a los servicios de accesibilidad.
Cambios en TextInput: Eliminamos onTextInput de TextInput ya que es poco común, no cumple con W3C y es difícil de implementar en Fabric. También eliminamos la prop no documentada inputView y selectionState.
AccessibilityInfo.fetch ya estaba obsoleto, pero en esta versión añadimos una advertencia.
Especificar useNativeDriver es ahora obligatorio para soportar cambiar el valor predeterminado en el futuro.
La ref de un componente Animated es ahora el componente interno y getNode está obsoleto.
¡Gracias a los cientos de colaboradores que ayudaron a hacer posible la versión 0.62!
Para ver todas las actualizaciones, consulta el registro de cambios de la versión 0.62.
Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
Nos complace anunciar React Native 0.61, que incluye una nueva experiencia de recarga que llamamos Fast Refresh.
Cuando preguntamos a la comunidad de React Native sobre puntos problemáticos comunes, una de las respuestas principales fue que la función de "recarga en caliente" estaba rota. No funcionaba de manera confiable para componentes funcionales, a menudo fallaba al actualizar la pantalla y no resistía errores tipográficos. Escuchamos que la mayoría de la gente la desactivaba porque era demasiado poco fiable.
En React Native 0.61, unificamos las funciones existentes de "recarga en vivo" (recargar al guardar) y "recarga en caliente" en una nueva función llamada "Fast Refresh". Fast Refresh se implementó desde cero con estos principios:
Fast Refresh admite completamente React moderno, incluidos componentes funcionales y Hooks.
Fast Refresh se recupera adecuadamente después de errores tipográficos y otros fallos, recurriendo a recarga completa cuando es necesario.
Fast Refresh no realiza transformaciones de código invasivas, por lo que es lo suficientemente confiable como para estar activado por defecto.
Para ver Fast Refresh en acción, mira este video:
¡Pruébalo y cuéntanos qué opinas! Si lo prefieres, puedes desactivarlo en el Menú de desarrollo (Cmd+D en iOS, Cmd+M o Ctrl+M en Android). Activarlo y desactivarlo es instantáneo, así que puedes hacerlo en cualquier momento.
Aquí tienes algunos consejos sobre Fast Refresh:
Por defecto, Fast Refresh preserva el estado local de React en componentes funcionales (¡y Hooks!).
Si necesitas resetear el estado de React en cada edición, añade el comentario especial // @refresh reset en el archivo de ese componente.
Fast Refresh siempre vuelve a montar componentes de clase sin preservar estado. Esto garantiza su funcionamiento confiable.
¡Todos cometemos errores en el código! Fast Refresh reintenta el renderizado automáticamente tras guardar un archivo. No necesitas recargar la app manualmente después de corregir errores de sintaxis o runtime.
Añadir sentencias console.log o debugger durante las ediciones es una técnica de depuración muy útil.
Reporta cualquier problema con Fast Refresh en GitHub, y los investigaremos.
Corrección del soporte para use_frameworks! en CocoaPods. En 0.60 realizamos actualizaciones para integrar CocoaPods por defecto. Lamentablemente, esto rompió compilaciones usando use_frameworks!. Esto está solucionado en 0.61, facilitando integrar React Native en proyectos iOS que requieren frameworks dinámicos.
Se añade el Hook useWindowDimensions. Este nuevo Hook proporciona y suscribe automáticamente actualizaciones de dimensiones, pudiendo usarse en lugar de la API Dimensions en la mayoría de casos.
React se actualizó a 16.9. Esta versión deprecia nombres antiguos de métodos del ciclo de vida UNSAFE_, contiene mejoras en act, y más. Consulta la publicación sobre React 16.9 para el script de migración automatizado y más información.
¡Gracias a todos los colaboradores que ayudaron a hacer posible la versión 0.61!
Para ver todas las actualizaciones, consulta el registro de cambios de la versión 0.61.
Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
Tras meses de trabajo duro de cientos de colaboradores, el equipo central de React Native se enorgullece de anunciar el lanzamiento de la versión 0.60. Esta versión aborda migraciones significativas tanto para Android como para iOS, además de resolver numerosos problemas. Esta publicación destaca los aspectos más relevantes de la versión. Como siempre, consulta el registro de cambios para obtener información más detallada. ¡Finalmente, gracias a todos los colaboradores por ayudarnos a alcanzar este hito!
Se han realizado numerosas mejoras en las API de accesibilidad, como announceForAccessibility, además de mejoras en roles, soporte para acciones, flags y más. La accesibilidad es una ciencia compleja, pero esperamos que estas mejoras faciliten un poco el trabajo en A11Y. Asegúrate de revisar la Actualización de Código Abierto de React Native de junio 2019 para más detalles sobre estos cambios.
¡La pantalla de inicio de React Native ha sido actualizada! Gracias a los numerosos colaboradores que ayudaron a crear la nueva interfaz. Este nuevo "Hola Mundo" dará la bienvenida a los usuarios al ecosistema de manera más amigable y atractiva.
AndroidX es un gran avance en el ecosistema Android, y los antiguos componentes de la biblioteca de soporte están quedando obsoletos. Para la versión 0.60, React Native ha migrado a AndroidX. Este es un cambio disruptivo, y tu código nativo y dependencias también deberán migrarse.
Con este cambio, las aplicaciones de React Native deberán comenzar a usar AndroidX directamente. No pueden coexistir en una misma aplicación, por lo que todo el código de la app y sus dependencias debe usar una u otra.
Aunque deberás migrar tu propio código nativo, @mikehardy, @cawfree y @m4tt72 crearon una herramienta inteligente llamada "jetifier" para parchear tus node_modules. Los mantenedores de bibliotecas necesitarán actualizarlas, pero esta herramienta ofrece una solución temporal mientras les das tiempo para lanzar una versión compatible con AndroidX. Así que si encuentras errores relacionados con la migración a AndroidX, prueba esto.
CocoaPods ahora forma parte del proyecto iOS de React Native. Si aún no lo hacías, asegúrate de abrir el código de la plataforma iOS usando el archivo xcworkspace de ahora en adelante (consejo: prueba xed ios desde el directorio raíz del proyecto). Además, los podspec para paquetes internos han cambiado para hacerlos compatibles con los proyectos de Xcode, lo que ayudará en la solución de problemas y depuración. Espera hacer cambios sencillos en tu Podfile como parte de la actualización a 0.60 para incorporar este soporte. Ten en cuenta que conocemos un problema de compatibilidad con use_frameworks!, y estamos siguiendo un issue con soluciones alternativas y un futuro parche.
WebView y NetInfo se extrajeron previamente en repositorios separados, y en 0.60 hemos terminado de migrarlos fuera del repositorio de React Native. Además, en respuesta a los comentarios de la comunidad sobre las nuevas políticas de App Store, Geolocation también se ha extraído. Si aún no lo has hecho, completa tu migración agregando dependencias a react-native-webview, @react-native-community/netinfo y @react-native-community/geolocation. Si prefieres una solución automatizada, considera usar rn-upgrade-deprecated-modules. Los mantenedores han realizado más de 100 commits en estos repositorios desde su extracción y estamos emocionados con el apoyo de la comunidad.
¡El equipo que trabaja en la CLI de React Native ha introducido mejoras importantes en la vinculación de módulos nativos llamadas autolinking! La mayoría de los escenarios ya no requerirán usar react-native link. Al mismo tiempo, el equipo renovó por completo el proceso de vinculación. Asegúrate de ejecutar react-native unlink para cualquier dependencia preexistente como se menciona en la documentación anterior.
@lucasbento, @pvinis, @kelset y @watadarkstar han construido una gran herramienta llamada Upgrade Helper para simplificar el proceso de actualización. Ayuda a usuarios de React Native con apps brownfield o personalizaciones complejas a ver qué ha cambiado entre versiones. Consulta la documentación actualizada de actualización y pruébala hoy mismo para tu ruta de actualización.
Los cambios para AndroidX casi seguramente requerirán actualizaciones en tu biblioteca, así que asegúrate de incluir soporte pronto. Si aún no puedes actualizar, considera verificar tu biblioteca con jetifier para confirmar que los usuarios puedan parchearla en tiempo de compilación.
Revisa la documentación de autolinking para actualizar tus configuraciones y README. Dependiendo de cómo se integró previamente tu biblioteca, es posible que también necesites hacer cambios adicionales. Consulta la guía de dependencias de la CLI para información sobre cómo definir tu interfaz de dependencia.
Aunque estos son los aspectos más destacados que mencionamos, hay muchos otros que pueden entusiasmarte. Para ver todas las actualizaciones, consulta el changelog. Como siempre, mantente atento para más noticias. ¡Disfruta de la versión 0.60 mientras tanto!
Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
¡Bienvenidos al lanzamiento de React Native 0.59! Esta es otra gran versión con 644 commits de 88 colaboradores. Las contribuciones también vienen en otras formas, así que gracias por mantener issues, fomentar comunidades y enseñar sobre React Native. Este mes trae varios cambios muy esperados, y esperamos que los disfruten.
Los React Hooks forman parte de este lanzamiento, permitiéndote reutilizar lógica con estado entre componentes. Hay mucho entusiasmo sobre los hooks, pero si aún no los conoces, revisa estos excelentes recursos:
- Introducing Hooks explica por qué añadimos Hooks a React.
- Hooks at a Glance es un resumen rápido de los Hooks integrados.
- Building Your Own Hooks demuestra reutilización de código con Hooks personalizados.
- Making Sense of React Hooks explora nuevas posibilidades desbloqueadas por Hooks.
- useHooks.com muestra recetas y demos de Hooks mantenidas por la comunidad.
Asegúrate de probarlos en tus apps. Esperamos que encuentres la reutilización tan emocionante como nosotros.
React Native usa JSC (JavaScriptCore) para ejecutar tu aplicación. La JSC en Android estaba desactualizada, lo que significaba que muchas características modernas de JavaScript no eran compatibles. Peor aún, su rendimiento era inferior comparado con la JSC moderna de iOS. Con este lanzamiento, eso cambia.
Gracias al increíble trabajo de @DanielZlotin, @dulmandakh, @gengjiawen, @kmagiera y @kudo, JSC se ha actualizado. Esto incluye soporte 64-bit, compatibilidad con JavaScript moderno y grandes mejoras de rendimiento. Reconocimiento también por hacer esto un proceso mantenible para aprovechar futuras mejoras de WebKit sin tanto esfuerzo, y gracias a Software Mansion y Expo por hacer posible este trabajo.
Queremos ayudar a tener apps React Native performantes por defecto y estamos trabajando para llevar las optimizaciones de Facebook a la comunidad. Las aplicaciones cargan recursos bajo demanda sin ralentizar el inicio. Esta función se llama "inline requires", permitiendo a Metro identificar componentes para carga diferida. Las apps con arquitecturas de componentes profundas y variadas verán mayor mejora.
Necesitamos que la comunidad pruebe esto antes de activarlo por defecto. Al actualizar a 0.59, verás un nuevo archivo metro.config.js; cambia la opción a true y danos tu feedback! Lee más sobre inline requires en la documentación de rendimiento para evaluar tu app.
React Native es un proyecto grande y complejo con un repositorio intrincado. Esto hace que la base de código sea menos accesible para colaboradores, difícil de probar y engorrosa como dependencia de desarrollo. Lean Core es nuestro esfuerzo para abordar estos problemas migrando código a bibliotecas separadas para una mejor gestión. Las últimas versiones han mostrado los primeros pasos de este proceso, pero es hora de ponernos serios.
Notarás que componentes adicionales ahora están oficialmente obsoletos. Esta es una gran noticia, ya que ahora existen responsables que mantienen activamente estas funcionalidades. Presta atención a los mensajes de advertencia y migra a las nuevas bibliotecas para estas características, porque se eliminarán en una versión futura. A continuación hay una tabla que indica el componente, su estado y dónde puedes migrar su uso.
| Component | Deprecated? | New home |
|---|---|---|
| AsyncStorage | 0.59 | @react-native-community/react-native-async-storage |
| ImageStore | 0.59 | expo-file-system or react-native-fs |
| MaskedViewIOS | 0.59 | @react-native-community/react-native-masked-view |
| NetInfo | 0.59 | @react-native-community/react-native-netinfo |
| Slider | 0.59 | @react-native-community/react-native-slider |
| ViewPagerAndroid | 0.59 | @react-native-community/react-native-viewpager |
Durante los próximos meses, muchos más componentes seguirán este camino hacia un núcleo más ligero. Buscamos ayuda con esto — visita el paraguas de Lean Core para colaborar.
Las herramientas de línea de comandos de React Native son el punto de entrada de los desarrolladores al ecosistema, pero tenían problemas de larga data y carecían de soporte oficial. Las herramientas CLI se han trasladado a un nuevo repositorio, y un grupo dedicado de mantenedores ya ha realizado mejoras significativas.
Los logs ahora tienen un formato mucho mejor. Los comandos se ejecutan casi instantáneamente — notarás la diferencia inmediatamente:
Escuchamos vuestros comentarios sobre el proceso de actualización de React Native y estamos tomando medidas para mejorar la experiencia en futuras versiones. Para actualizar a 0.59, recomendamos usar rn-diff-purge para identificar los cambios entre vuestra versión actual de React Native y 0.59, luego aplicar esos cambios manualmente. Una vez actualizado vuestro proyecto a 0.59, podréis usar el comando mejorado react-native upgrade (¡basado en rn-diff-purge!) para actualizar a 0.60 y versiones posteriores a medida que estén disponibles.
El soporte para Android en 0.59 se ha actualizado siguiendo las últimas recomendaciones de Google, lo que podría causar problemas en aplicaciones existentes. Este problema podría manifestarse como un fallo en tiempo de ejecución con el mensaje: "You need to use a Theme.AppCompat theme (or descendant) with this activity". Recomendamos actualizar el archivo AndroidManifest.xml de vuestro proyecto, asegurando que el valor android:theme sea un tema AppCompat (como @style/Theme.AppCompat.Light.NoActionBar).
El comando react-native-git-upgrade se ha eliminado en 0.59 en favor del comando mejorado react-native upgrade.
Muchos nuevos colaboradores ayudaron con habilitar la generación de código nativo a partir de tipos Flow y resolver advertencias de Xcode - estas son excelentes formas de aprender cómo funciona React Native y contribuir al bien común. ¡Gracias! Estad atentos a problemas similares en el futuro.
Aunque estos son los aspectos más destacados que hemos señalado, hay muchos otros que te entusiasmarán. Para ver todas las actualizaciones, consulta el registro de cambios. 0.59 es un lanzamiento enorme: estamos deseando que lo pruebes.
Tenemos aún más mejoras planeadas para lo que resta del año. ¡Mantente atento!
Ryan y todo el equipo central de React Native
Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
La tan esperada versión 0.56 de React Native ya está disponible 🎉. Esta entrada de blog destaca algunos de los cambios introducidos en esta nueva versión. También queremos aprovechar para explicar en qué hemos estado ocupados desde marzo.
La Guía del colaborador explica el proceso de integración por el que pasan todos los cambios en React Native. El proyecto está compuesto por muchas herramientas diferentes, que requieren coordinación y soporte constante para que todo funcione correctamente. Si añadimos la vibrante comunidad de código abierto que contribuye al proyecto, obtendrán una idea de la escala alucinante que todo esto supone.
Con la impresionante adopción de React Native, los cambios que rompen compatibilidad deben hacerse con mucho cuidado, y el proceso no es tan fluido como nos gustaría. Se decidió omitir los lanzamientos de abril y mayo para permitir que el equipo central integrara y probara un nuevo conjunto de cambios que rompen compatibilidad. Se utilizaron canales de comunicación dedicados con la comunidad para garantizar que el lanzamiento de junio de 2018 (0.56.0) sea lo más sencillo posible de adoptar para quienes esperaron pacientemente la versión estable.
¿Es 0.56.0 perfecta? No, como cualquier otro software: pero hemos alcanzado un punto donde el equilibrio entre "esperar más estabilidad" versus "las pruebas dieron resultados exitosos y podemos avanzar" nos hace sentir preparados para lanzarla. Además, somos conscientes de algunos problemas que no se resolvieron en la versión final de 0.56.0. La mayoría de desarrolladores no deberían tener problemas al actualizar a 0.56.0. Para quienes estén bloqueados por los problemas mencionados, esperamos verles en nuestras discusiones y estamos deseando trabajar con ustedes en soluciones para estos problemas.
Pueden considerar 0.56.0 como un bloque fundamental hacia un marco más estable: probablemente tomará una o dos semanas de adopción generalizada antes de que se pulan todos los casos extremos, pero esto conducirá a un lanzamiento aún mejor en julio de 2018 (0.57.0).
Nos gustaría concluir esta sección agradeciendo a los 67 colaboradores que trabajaron en un total de 818 commits (!) que ayudarán a mejorar sus aplicaciones 👏.
Y ahora, sin más preámbulos...
Como quizá sepan, la herramienta de transpilación que nos permite usar las últimas y mejores características de JavaScript, Babel, está migrando a v7 próximamente. Dado que esta nueva versión trae cambios importantes, consideramos que ahora es un buen momento para actualizar, permitiendo que Metro aproveche sus mejoras.
Si tienen problemas con la actualización, consulten la sección de documentación relacionada.
En Android, gran parte del ecosistema de herramientas ha cambiado. Hemos actualizado a Gradle 3.5, Android SDK 26, Fresco a 1.9.0 y OkHttp a 3.10.0, e incluso el NDK API target a API 16. Estos cambios deberían implementarse sin problemas y resultarán en builds más rápidos. Más importante aún, ayudará a los desarrolladores a cumplir con los nuevos requisitos de Play Store que entrarán en vigor el próximo mes.
Relacionado con esto, nos gustaría agradecer especialmente a Dulmandakh por los numerosos PRs enviados para hacerlo posible 👏.
Quedan más pasos por tomar en esta dirección, y puedes seguir la planificación futura y discusión sobre la actualización del soporte para Android en el issue dedicado (y otro adicional para JSC).
Node 8 es ahora el estándar para React Native. En realidad ya se estaba probando, pero nos hemos comprometido completamente ahora que Node 6 entró en modo mantenimiento. React también se actualizó a 16.4, que trae consigo una gran cantidad de correcciones.
Estamos eliminando el soporte para iOS 8, haciendo que iOS 9 sea la versión más antigua que se puede targetear. No prevemos que esto sea un problema, ya que cualquier dispositivo que ejecute iOS 8 puede actualizarse a iOS 9. Este cambio nos permitió eliminar código poco utilizado que implementaba soluciones alternativas para dispositivos antiguos con iOS 8.
La cadena de herramientas de integración continua se ha actualizado para usar Xcode 9.4, asegurando que todas las pruebas de iOS se ejecuten en las herramientas de desarrollo más recientes proporcionadas por Apple.
Hemos actualizado a Flow 0.75 para usar el nuevo formato de errores que muchos desarrolladores aprecian. También hemos creado tipos para muchos más componentes. Si aún no aplicas tipado estático en tu proyecto, considera usar Flow para identificar problemas durante el desarrollo en lugar de en tiempo de ejecución.
Por ejemplo, YellowBox fue reemplazado con una nueva implementación que mejora mucho la depuración.
Para las notas completas de la versión, consulta el changelog completo aquí. Y recuerda revisar la guía de actualización para evitar problemas al migrar a esta nueva versión.
Una nota final: a partir de esta semana, el equipo central de React Native reanudará las reuniones mensuales. Nos aseguraremos de mantener a todos actualizados sobre lo tratado, y consideraremos sus comentarios para futuras reuniones.
¡Feliz coding a todos!
Lorenzo, Ryan, y todo el equipo central de React Native
PD: como siempre, queremos recordar que React Native sigue en versión 0.x debido a los muchos cambios en curso. Al actualizar, recuerden que sí, probablemente algo podría fallar o romperse. Sean colaborativos en los issues y al enviar PRs, y recuerden seguir el CoC: siempre hay una persona al otro lado de la pantalla.