Entradas

9.2-13. Eventos en React Native

  Eventos en React Native: Guía Práctica En React Native, los  eventos  son esenciales para crear interacciones dinámicas en tus apps. ¡Aquí te explico cómo dominarlos! 📌  Eventos clave  (vs. HTML): onPress  → Reemplaza al  onClick  de HTML. Usado en botones, textos y más. onChangeText  → Similar al  onChange  de HTML, pero específico para  TextInput . Diferencia clave : En React Native, recibes directamente el  texto  (no el evento del DOM). 🛠  Ejemplo práctico  (con código): jsx import { Button , TextInput , Alert } from 'react-native' ; function App ( ) { const [ text , setText ] = useState ( '' ) ; const handlePress = ( ) => Alert . alert ( '¡Botón presionado!' ) ; const handleChangeText = ( newText ) => setText ( newText ) ; return ( < > < TextInput placeholder = " Escribe algo... " onChangeText = { handleChangeText } ...
Publicar un comentario
Leer más

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> ...
Publicar un comentario
Leer más

7.6-11. Layouts en React Native

  Layouts en React Native: Domina el Diseño con Flexbox ¿Quieres aprender a estructurar tus pantallas en React Native como un experto? 🚀 En este post, te explico cómo funcionan los  layouts  usando  Flexbox , la misma tecnología que se usa en CSS pero adaptada para apps móviles. 🔹  Conceptos Clave de Flexbox en React Native Contenedor Padre ( View )  → Controla la dirección y alineación de los hijos. Elementos Hijos  → Se adaptan según las reglas Flexbox del padre. ⚙️  Propiedades Esenciales Propiedad Efecto flexDirection row  (horizontal) /  column  (vertical -  default ) justifyContent Alineación  vertical  ( flex-start ,  center ,  flex-end ,  space-between ) alignItems Alineación  horizontal  ( flex-start ,  center ,  flex-end ,  stretch ) flex Proporción de espacio que ocupa un hijo (ej:  flex: 1  para llenar todo). 💻  Ejemplo Práctico jsx import { View ...
Publicar un comentario
Leer más

7.5-10. ¿Como funcionan los estilos en React Native?

  ¿Cómo funcionan los estilos en React Native? En React Native, los estilos no usan CSS tradicional, sino un sistema basado en  objetos JavaScript  similar. ¡Te explico cómo dominarlo! 📌 Componente clave:  StyleSheet Es el equivalente a una hoja de estilos CSS, pero en formato de objeto: javascript import { StyleSheet } from 'react-native' ; const styles = StyleSheet . create ( { contenedor : { borderRadius : 10 , borderWidth : 2 , borderColor : '#000' , } , titulo : { fontSize : 19 , fontWeight : 'bold' , } , } ) ; 🔥 Características importantes: Soporte por componente : Cada elemento (View, Text, etc.) acepta estilos con atributos específicos. Múltiples estilos : Pásalos como un  arreglo : javascript < Text style = { [ styles . titulo , styles . centrado ] } > Hola < / Text > Estilos dinámicos : Usa condicionales para cambiar estilos: javascript < Text style = { [ styles . titulo , isActive...
Publicar un comentario
Leer más