Guías Técnicas

Cómo usar el componente View

  ¿Qué es View en React Native?

El componente View es el contenedor más básico en React Native.
Se utiliza para organizar y agrupar elementos visuales como textos, botones, imágenes, listas, tablas, etc.

Se puede comparar con un <div> en HTML, ya que sirve como envoltorio para otros componentes.

Uso básico del componente View

Un ejemplo sencillo del componente View aplicando algunos estilos en línea:

jsx 
import React from 'react';
import { View, Text } from 'react-native';

// Componente funcional EjemploView
const EjemploView = () => {
return (
  <View style={{ backgroundColor: 'lightgray', padding: 20, borderRadius: 5 }}>
    <Text>Este es un contenedor</Text>
  </View>
);
};

export default EjemploView;
  Importante

En React y React Native, las dobles llaves ({{ }}) indican que estás pasando un objeto en JSX.

  • La primera { } permite escribir una expresión de JavaScript dentro de JSX.
  • La segunda { } contiene el objeto con los estilos en formato clave-valor.

Esto es necesario porque los estilos en React se definen como objetos de JavaScript en lugar de cadenas CSS.

¿Cuándo usar View?

  Usa View cuando necesites:

  • Agrupar varios elementos visuales.
  • Aplicar estilos o espaciado a una sección.
  • Crear estructuras o layouts dentro de tu app.

💡Es uno de los componentes más usados y te va a acompañar en casi todos los diseños que hagas en React Native.