Componentes en React Native

Autor: | Última modificación: 23 de agosto de 2022 | Tiempo de Lectura: 3 minutos

¿Estás familiarizado con los componentes en React Native? En caso de que tu respuesta sea negativa, te contamos que en este post puedes averiguar qué son, cuáles son algunos de los componentes que podemos usar en este framework y cómo puedes instalarlos.

De hecho, en caso de que no sepas lo que es React Native, te recomendamos que vayas a echarle un vistazo a nuestro post ¿Qué es React Native?, en el que descubrirás qué es y en qué consisten algunas de sus características fundamentales.

¿Qué son los componentes en React Native?

En pocas palabras, los componentes en React Native hacen referencia a unos elementos que podemos crear en esta librería, los cuales nos dan la posibilidad de separar la interfaz en diferentes partes que, a la final, resultan ser reutilizables.

Estos se representan con la palabra clave Component, que es la clase de la que van a extender todas nuestras clases.

Algo que siempre debemos tener presente es que, como React Native usa React, nuestro Component se importa desde la librería de React. De modo que para importarlo, debemos añadir lo siguiente: import React, { Component } from ‘react’.

Tipos de componentes en React Native

A grandes rasgos, hemos de destacar que existen dos tipos de componentes en React Native, los cuales son:

  • Componentes de clase.
  • Componentes de función.

Componentes básicos en React-Native

En este framework podemos encontrar diversos componentes, los cuales cuentan con una función específica. Los componentes más usados y que, de hecho, son considerados como básicos son los siguientes:

  • StyleSheet: este es el componente en el que añadiremos los estilos del componente.
  • View: este es el componente más básico sobre el que heredan la mayoría de los demás componentes. Lo podríamos equiparar a un <div> de HTML.
  • Text: este componente es en el que mostraremos textos.
  • Image: este componente sirve para mostrar imágenes
  • TextInput: la función de este componente es proporcionarle un espacio al usuario para que pueda ingresar texto por medio del teclado de su dispositivo.
  • ScrollView: este componente permite establecer un contenedor en el que se podrán almacenar varios componentes que se pueden ir desplazando en la pantalla.

¿Cómo podemos instalar los componentes en React Native?

🔴 ¿Quieres entrar de lleno al Desarrollo Mobile? 🔴

Descubre el Desarrollo de Apps Móviles Full Stack Bootcamp de KeepCoding. La formación más completa del mercado y con empleabilidad garantizada

👉 Prueba gratis el Bootcamp en Desarrollo de Apps Móviles por una semana

Ahora bien, otro aspecto de suma importancia relacionado con el tema de los componentes en React Native es cómo se importan estos elementos. En general, para importar los componentes de esta librería lo podemos hacer de la siguiente forma: import { StyleSheet, Text, View } from ‘react-native’.

De hecho, en la siguiente imagen puedes ver una representación de cómo se importarían los componentes en React Native:

Componentes en React Native 1

Hay que tener en cuenta que React Native está muy enfocado en reutilizar componentes, ya sea hechos por nosotros o por un tercero. Este es un aspecto que permite agilizar mucho el desarrollo de nuestro proyecto.

Para poder instalar componentes con el propósito de integrarlos en nuestra interfaz de usuario, debemos realizar alguno de los siguientes pasos:

  • Para instalar componentes de terceros usamos npm, el gestor de paquetes de node.
  • Para instalar un componente basta con poner npm install –save {nombre del componente}.

Por otro lado, en el caso de que creemos un componente propio que pueda ser de utilidad a más programadores, podemos publicarlo en npm para que cualquiera lo pueda utilizar.

Aprende más sobre desarrollo de apps móviles

Ahora que conoces qué son los componentes en React Native, cuáles son algunos de ellos y cómo puedes instalarlos, es probable que te interese conocer mucho más en relación a la información acerca de esta librería. Por esta razón, te contamos que en KeepCoding nos proponemos buscar la forma de ayudarte a familiarizarte con el desarrollo mobile para acompañarte en tu proceso de formación, por lo que hemos lanzado nuestro Desarrollo de Apps Móviles Full Stack Bootcamp.   

Con este bootcamp, podrás acceder a una formación intensiva e íntegra de alta calidad que será perfecta para tu proceso de aprendizaje. Dentro de nuestro temario se encuentran contemplados temas como los procesos de desarrollo y diseño de apps multiplataforma, así como cuáles son los fundamentos iOS y Android y diferentes frameworks, entre muchas cosas más. ¡Empieza tu proceso de formación en desarrollo mobile con nosotros!

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de aplicaciones sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!