Componentes principales y componentes nativos
Componentes principales y componentes nativos
React Native es un marco de código abierto para crear aplicaciones de iOS y Android utilizando React y las capacidades nativas de la plataforma de aplicaciones. Con React Native, usas JavaScript para acceder a las API de tu plataforma, así como para describir la apariencia y el comportamiento de tu interfaz de usuario usando componentes de React: paquetes de código reutilizable y anidado. Puedes obtener más información sobre React en la siguiente sección. Pero primero, veamos cómo funcionan los componentes en React Native.
Vistas y desarrollo móvil
En el desarrollo de Android e iOS, una vista es el componente básico de la interfaz de usuario: un pequeño elemento rectangular en la pantalla que se puede usar para mostrar texto, imágenes o responder a la entrada del usuario. Incluso los elementos visuales más pequeños de una aplicación, como una línea de texto o un botón, son tipos de vistas. Algunos tipos de vistas pueden contener otras vistas. ¡Son vistas hasta el final!
Es solo una muestra de las muchas vistas que se usan en las aplicaciones de iOS y Android.
Componentes nativos
En el desarrollo de Android, escribes vistas en Kotlin o Java; en el desarrollo de iOS, se usa Swift u Objective-C. Con React Native, puede invocar estas vistas con JavaScript utilizando componentes de React. En tiempo de ejecución, React Native crea las vistas de Android e iOS correspondientes para esos componentes. Debido a que los componentes de React Native están respaldados por las mismas vistas que Android e iOS, las aplicaciones de React Native se ven, se sienten y funcionan como cualquier otra aplicación. A estos componentes respaldados por la plataforma los llamamos componentes nativos.
React Native viene con un conjunto de componentes nativos esenciales y listos para usar que puedes usar para comenzar a crear tu aplicación hoy. Estos son los componentes principales de React Native.
React Native también te permite crear tus propios componentes nativos para Android e iOS para satisfacer las necesidades únicas de tu aplicación. También contamos con un próspero ecosistema de estos componentes aportados por la comunidad. Echa un vistazo a Native Directory para encontrar lo que la comunidad ha estado creando.
Componentes principales
React Native tiene muchos componentes principales para todo, desde controles hasta indicadores de actividad. Puedes encontrarlos todos documentados en la sección API. Trabajará principalmente con los siguientes componentes principales:
REACT NATIVE COMPONENTES UI | ANDROID VIEW | IOS VIEW | WEB ANALOG | DESCRIPCIÓN |
<View> | <ViewGroup> | <UIView> | A non-scrolling <div> | Un contenedor que admite diseño con flexbox, estilo, algo de manejo táctil y controles de accesibilidad. |
<Text> | <TextView> | <UITextView> | <p> | Muestra, aplica estilos y anida cadenas de texto e incluso maneja eventos táctiles |
<Image> | <ImageView> | <UIImageView> | <img> | Muestra diferentes tipos de imágenes. |
<ScrollView> | <ScrollView> | <UIScrollView> | <div> | Un contenedor de desplazamiento genérico que puede contener múltiples componentes y vistas. |
<TextInput> | <EditText> | <UITextField> | <input type=»text»> | Permite al usuario ingresar texto. |
En la siguiente sección, comenzará a combinar estos componentes principales para aprender cómo funciona React. ¡Juega con ellos aquí ahora!
Debido a que React Native utiliza la misma estructura API que los componentes de React, necesitará comprender las API de los componentes de React para comenzar. La siguiente sección ofrece una rápida introducción o un repaso del tema. Sin embargo, si ya está familiarizado con React, no dude en seguir adelante.
