5-El Componente View en React Native

 El Componente View en React Native

¿Qué es el componente View?

View es el contenedor principal en React Native. Equivale a un <div> en HTML y se usa para:

• Agrupar otros componentes.

• Aplicar estilos (fondos, bordes, márgenes).

• Crear layouts con Flexbox.

Props más Usadas

Prop	Descripción	Ejemplo
style	Aplica estilos (CSS-like).	style={styles.container}
onPress	Maneja toques (requiere TouchableOpacity).	onPress={() => alert('Click')}
flex	Define cómo se expande en pantalla.	flex: 1 (ocupa todo el espacio disponible).

Ejemplo Práctico

javascript

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

const App = () => {
  return (
    <View style={styles.mainView}>
      <View style={styles.box1}>
        <Text>Caja 1</Text>
      </View>
      <View style={styles.box2}>
        <Text>Caja 2</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  mainView: {
    flex: 1,
    flexDirection: 'row', // Disposición horizontal
    padding: 20,
  },
  box1: {
    flex: 1,
    backgroundColor: 'red',
    justifyContent: 'center',
    alignItems: 'center',
  },
  box2: {
    flex: 2,
    backgroundColor: 'blue',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

¿Qué hace este código?

• Crea un View principal (mainView) con disposición en fila (flexDirection: 'row').

• Dos sub-Views: box1 (rojo) ocupa 1/3 del espacio y box2 (azul) 2/3 (por el flex: 1 vs flex: 2).

Flexbox en View

React Native usa Flexbox para layouts. Algunas propiedades clave:

• flexDirection: row (horizontal) o column (vertical, valor por defecto).

• justifyContent: Alinea elementos en el eje principal (center, space-between).

• alignItems: Alinea en el eje secundario (center, flex-start).

Conclusión

El View es la piedra angular de tus diseños en React Native. Domínalo y podrás crear estructuras complejas fácilmente.

🚀 En el próximo post hablaremos del componente Text. ¡No te lo pierdas!