4.2-12. Componentes esenciales

  Componentes esenciales de React Native (Vignatti) 📱

En este video, exploramos y utilizamos los componentes esenciales de React Native (Vignatti), junto con los NAC Decks. Estamos en la fase final de los fundamentos que todo desarrollador debe dominar antes de empezar un proyecto.

🔹 ¿Qué veremos?

• Equivalencia con HTML: Comparativa de los componentes de Vignatti vs. HTML.

• Funcionamiento clave: Cómo usar cada componente en proyectos reales.

---

📌 Componentes principales:

1️⃣ View → Como un div en HTML. Es un contenedor que puede anidar otros componentes.

• Dato clave: Si el contenido excede la pantalla, ¡usa ScrollView para evitar cortes!

2️⃣ Image → Similar a <img> en HTML.

• Propiedad source para cargar imágenes (local o URL).

• ¡Obligatorio! Asignarle un estilo con width y height.

3️⃣ Text → Equivalente a <p>, <span> o <h1>.

• Usamos números para tamaños de fuente (ej: fontSize: 20).

4️⃣ Button → Como <button> en HTML, pero con diferencias:

• Evento onPress (no onClick).

• Diseño varía en iOS y Android.

5️⃣ ActivityIndicator → Un "spinner" para cargas (como en CSS).

• Personalizable con size y color.

6️⃣ TextInput → Similar a <input type="text">.

• Requiere estilos básicos (ej: backgroundColor: 'white').

---

🛠️ Demo rápida en Expo Snack:

jsx

import { View, Text, ScrollView, Image, TextInput, Button, ActivityIndicator } from 'react-native';

export default function App() {
  return (
    <ScrollView>  {/* ¡Sin ScrollView, el contenido se corta! */}
      <Text style={{ fontSize: 20, textAlign: 'center' }}>Bienvenido</Text>
      <ActivityIndicator size="large" color="#212121" />
      <Image 
        source={{ uri: 'https://ejemplo.com/balon-futbol.jpg' }} 
        style={{ width: 100, height: 100, marginTop: 25 }} 
      />
      <TextInput 
        style={{ width: 300, height: 40, backgroundColor: 'white', marginTop: 100 }} 
        placeholder="Escribe algo..."
      />
      <Button 
        title="Presióname" 
        onPress={() => alert('¡Funciona!')}  // Evento onPress, no onClick
      />
    </ScrollView>
  );
}

---

📣 Tips importantes:

• Diferencias iOS/Android: Componentes como Button o Alert se ven distintos en cada SO.

• ScrollView: Necesario para contenido extenso (¡View no hace scroll automático!).

• Documentación oficial: Revisa las propiedades de cada componente en la API de React Native.

🔜 Próximos pasos: Integraremos librerías para proyectos más complejos (como si fuera Vuetify o Bootstrap).

¿Te quedaron dudas? ¡Déjalas en los comentarios! 👇

#ReactNative #Frontend #MobileDev #Programación