Saltar al contenido principal
Versión: 0.79

Componentes principales y componentes nativos

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 →

React Native es un framework de código abierto para construir aplicaciones Android e iOS utilizando React y las capacidades nativas de la plataforma. Con React Native, usas JavaScript para acceder a las APIs de tu plataforma y describir la apariencia y comportamiento de tu interfaz mediante componentes de React: conjuntos de código reutilizable y anidables. Puedes aprender más sobre React en la siguiente sección. Pero primero, cubramos cómo funcionan los componentes en React Native.

Vistas y desarrollo móvil

En el desarrollo de Android e iOS, una vista es el bloque básico de construcción de la UI: un elemento rectangular pequeño en pantalla que puede mostrar texto, imágenes o responder a entradas del usuario. Incluso los elementos visuales más pequeños de una app, como una línea de texto o un botón, son tipos de vistas. Algunas vistas pueden contener otras vistas. ¡Es un mundo de vistas recursivas!

Diagram of Android and iOS app showing them both built on top of atomic elements called views.
Just a sampling of the many views used in Android and iOS apps.

Componentes nativos

En desarrollo Android, escribes vistas en Kotlin o Java; en iOS, usas Swift u Objective-C. Con React Native, puedes invocar estas vistas con JavaScript mediante componentes de React. En tiempo de ejecución, React Native crea las vistas Android e iOS correspondientes para esos componentes. Como los componentes de React Native se apoyan en las mismas vistas que Android e iOS, las apps de React Native se ven, sienten y funcionan como cualquier otra app nativa. Llamamos Componentes Nativos a estos componentes respaldados por la plataforma.

React Native incluye un conjunto de Componentes Nativos esenciales y listos para usar con los que puedes empezar a construir tu aplicación hoy mismo. Estos son los Componentes Principales de React Native.

precaución

Esta documentación hace referencia a un conjunto heredado de APIs y necesita actualizarse para reflejar la Nueva Arquitectura

React Native también te permite crear tus propios Componentes Nativos para Android e iOS según las necesidades únicas de tu app. Además, contamos con un ecosistema próspero de componentes contribuidos por la comunidad. Explora Native Directory para descubrir lo que ha creado la comunidad.

Componentes principales

React Native tiene muchos Componentes Principales para todo tipo de elementos, desde controles hasta indicadores de actividad. Puedes encontrarlos todos documentados en la sección de API. Principalmente trabajarás con los siguientes Componentes Principales:

React Native UI ComponentAndroid ViewiOS ViewWeb AnalogDescription
<View><ViewGroup><UIView>A non-scrolling <div>A container that supports layout with flexbox, style, some touch handling, and accessibility controls
<Text><TextView><UITextView><p>Displays, styles, and nests strings of text and even handles touch events
<Image><ImageView><UIImageView><img>Displays different types of images
<ScrollView><ScrollView><UIScrollView><div>A generic scrolling container that can contain multiple components and views
<TextInput><EditText><UITextField><input type="text">Allows the user to enter text

En la siguiente sección, comenzarás a combinar estos Componentes Principales para entender cómo funciona React. ¡Pruébalos ahora mismo aquí!


Como React Native usa la misma estructura de API que los componentes de React, necesitarás comprender las APIs de componentes de React para empezar. La siguiente sección sirve como introducción rápida o repaso del tema. Sin embargo, si ya conoces React, no dudes en saltar adelante.

A diagram showing React Native's Core Components are a subset of React Components that ship with React Native.A diagram showing React Native's Core Components are a subset of React Components that ship with React Native.