16. Componente Button,Touchable[Highlight,Opacity,WithoutFeedback]

 

Tema: 16. Componente (Button, Touchable[Highlight, Opacity, WithoutFeedback])

Objetivo:

Comprender el uso y diferencias entre los componentes Button y los distintos tipos de Touchable en React Native para manejar interacciones táctiles.

---

Contenido del tema:

1. Componente Button:

• Descripción: Componente básico para crear botones con funcionalidad de onPress.

• Uso: Se importa de react-native y es útil para ejecutar acciones al hacer clic.

• Propiedades comunes:

• title: Texto que aparece en el botón.

• onPress: Función que se ejecuta al presionar el botón.

• color: Color del botón (por defecto azul en iOS).

• Ejemplo:

• jsx

<Button

  title="Haz click"

  onPress={() => console.log('Botón presionado')}

• />

• Comportamiento: Al presionar, cambia a un tono más oscuro y ejecuta la acción definida.

---

2. Componente TouchableHighlight:

• Descripción: Envuelve cualquier componente y aplica un efecto de "resaltado" (sombreado oscuro) al ser presionado.

• Uso: Ideal cuando se desea un feedback visual claro al tocar un elemento.

• Ejemplo con imagen:

• jsx

<TouchableHighlight

  onPress={() => console.log('Botón TouchableHighlight')}

>

  <Image

    style={{ width: 150, height: 150 }}

    source={require('./imgs/react-native.jpg')}

  />

• </TouchableHighlight>

• Comportamiento: Al tocar, oscurece completamente el contenido interior.

---

3. Componente TouchableOpacity:

• Descripción: Reduce la opacidad del contenido al ser presionado.

• Uso: Útil para un efecto visual sutil al interactuar con elementos táctiles.

• Ejemplo:

• jsx

<TouchableOpacity

  onPress={() => console.log('Botón TouchableOpacity')}

>

  <Image

    style={{ width: 150, height: 150 }}

    source={{ uri: 'data:image/png;base64,...' }}

  />

• </TouchableOpacity>

• Comportamiento: Al presionar, el contenido se vuelve semi-transparente.

---

4. Componente TouchableWithoutFeedback:

• Descripción: Permite manejar toques sin proporcionar ningún feedback visual.

• Uso: Recomendado cuando no se quiere alterar la apariencia del elemento al tocarlo (ej. imágenes que no deben cambiar visualmente).

• Ejemplo:

• jsx

<TouchableWithoutFeedback

  onPress={() => console.log('Botón TouchableWithoutFeedback')}

>

  <Text>Botón sin feedback visual</Text>

• </TouchableWithoutFeedback>

• Comportamiento: No hay cambio visual al tocar, pero se ejecuta la acción asignada.

---

Resumen de diferencias:

Componente	Feedback visual	Uso recomendado
Button	Cambio de color	Botones estándar con título
TouchableHighlight	Sombreado oscuro	Elementos que requieren énfasis al tocar
TouchableOpacity	Reducción de opacidad	Interacciones sutiles
TouchableWithoutFeedback	Ninguno	Elementos que no deben cambiar al tocar

---

Conclusión:

React Native ofrece múltiples formas de manejar interacciones táctiles, cada una con un propósito específico. La elección depende del tipo de feedback visual que se desee proporcionar al usuario. Se recomienda:

• Usar Button para acciones principales con texto claro.

• Usar TouchableHighlight o TouchableOpacity para elementos personalizados que necesiten feedback visual.

• Usar TouchableWithoutFeedback cuando no se quiera alterar la interfaz al tocar.

---

Ejemplo visual en código:

jsx

import React from 'react';

import { Button, TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback, Image, Text, View } from 'react-native';

const App = () => {

  return (

    <View>

      {/* Button */}

      <Button

        title="Haz click"

        onPress={() => console.log('Botón presionado')}

      />

      {/* TouchableHighlight con imagen */}

      <TouchableHighlight

        onPress={() => console.log('Botón TouchableHighlight')}

      >

        <Image

          style={{ width: 150, height: 150 }}

          source={require('./imgs/react-native.jpg')}

        />

      </TouchableHighlight>

      {/* TouchableOpacity con imagen */}

      <TouchableOpacity

        onPress={() => console.log('Botón TouchableOpacity')}

      >

        <Image

          style={{ width: 150, height: 150 }}

          source={{ uri: 'data:image/png;base64,...' }}

        />

      </TouchableOpacity>

      {/* TouchableWithoutFeedback con texto */}

      <TouchableWithoutFeedback

        onPress={() => console.log('Botón TouchableWithoutFeedback')}

      >

        <Text>Botón sin feedback visual</Text>

      </TouchableWithoutFeedback>

    </View>

  );

};

export default App;

---

Nota: Asegúrate de ajustar las rutas de imágenes y estilos según tu proyecto