9.1-22. Eventos

 

Manejo de Eventos en React Native: Interactuando con el Usuario

Los eventos son fundamentales para crear aplicaciones interactivas. En React Native, podemos capturar gestos del usuario como toques, deslizamientos o escritura. Hoy exploraremos cómo manejar estos eventos efectivamente.

📱 Evento Básico: onPress

El evento más común es el toque/clic, manejado con onPress:

jsx

import { TouchableOpacity } from 'react-native';

function MiBoton({ onPress }) {
  return (
    <TouchableOpacity onPress={onPress}>
      {/* Contenido del botón */}
    </TouchableOpacity>
  );
}

Implementación en Functional Component

jsx

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

interface BotonProps {
  onPress: () => void;
}

function MiBoton({ onPress }: BotonProps) {
  return (
    <TouchableOpacity 
      style={styles.boton} 
      onPress={onPress}
    >
      <View style={styles.circulo} />
    </TouchableOpacity>
  );
}

// Uso:
<MiBoton onPress={() => console.log('Botón presionado!')} />

Implementación en Class Component

jsx

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

interface BotonClassProps {
  onPress: () => void;
}

class MiBotonClass extends React.Component<BotonClassProps> {
  render() {
    return (
      <TouchableOpacity 
        style={styles.boton}
        onPress={this.props.onPress}
      >
        <View style={styles.circulo} />
      </TouchableOpacity>
    );
  }
}

// Uso:
<MiBotonClass onPress={() => console.log('Class Botón presionado!')} />

🎯 Tipos de Componentes para Eventos

Componente	Descripción
TouchableOpacity	Reduce opacidad al presionar (el más usado)
TouchableHighlight	Cambia color de fondo
TouchableWithoutFeedback	Gestos sin feedback visual
Pressable	Versión moderna (React Native 0.63+)

🔄 Tipos Comunes de Eventos

1. Toque/Click:

   jsx

   <TouchableOpacity onPress={() => alert('¡Toque!')}>

2. Toque Largo:

   jsx

   <TouchableOpacity onLongPress={() => alert('Toque prolongado')}>

3. Scroll:

   jsx

   <ScrollView onScroll={({ nativeEvent }) => console.log(nativeEvent)}>

4. Teclado:

   jsx

   <TextInput onChangeText={(text) => console.log(text)} />

💡 Buenas Prácticas

1. Desacoplar lógica:

   jsx

   const handlePress = () => {
     // Lógica compleja aquí
   };
   
   <TouchableOpacity onPress={handlePress}>

2. Evitar funciones inline para renders frecuentes:

   jsx

   // ❌ Evitar en listas grandes
   <FlatList
     renderItem={({ item }) => (
       <TouchableOpacity onPress={() => handleItemPress(item.id)}>
     )}
   />
   
   // ✅ Mejor
   const renderItem = ({ item }) => (
     <TouchableOpacity onPress={handleItemPress}>
   );

3. TypeScript para tipos seguros:

   tsx

   interface Props {
     onPress: (itemId: string) => void;
   }

🚀 Ejemplo Completo: Botón Reutilizable

jsx

interface AwesomeButtonProps {
  title: string;
  onPress: () => void;
  color?: string;
}

function AwesomeButton({ title, onPress, color = '#3498db' }: AwesomeButtonProps) {
  return (
    <TouchableOpacity 
      style={[styles.button, { backgroundColor: color }]}
      onPress={onPress}
      activeOpacity={0.7}
    >
      <Text style={styles.text}>{title}</Text>
    </TouchableOpacity>
  );
}

// Uso:
<AwesomeButton 
  title="Guardar" 
  onPress={saveData} 
  color="#2ecc71"
/>

📌 Conclusión

• Usa TouchableOpacity para la mayoría de casos de interacción

• Tipa tus eventos con TypeScript para mayor seguridad

• Considera Pressable para proyectos nuevos (ofrece más control)

• Desacopla la lógica de los handlers para código más limpio