¿Qué es TouchableHighlight en reaccionar nativo?

TouchableHighlight es un componente que se usa para proporcionar un envoltorio para las vistas para que respondan correctamente a la entrada táctil. Al presionar hacia abajo, se reduce la opacidad del componente TouchableHighlight, lo que permite que se resalte la vista subyacente o el estilo de otro componente.

Este componente debe tener solo un componente secundario. Si hay más de un componente secundario, envuélvalos dentro de un componente Vista. Es necesario que haya un componente hijo de TouchableHighlight.

Sintaxis:

<TouchableHighlight>
    // Child Component
</TouchableHighlight>

Accesorios TouchableHighlight:

• onPress: se utiliza para especificar una función que se llama cuando se suelta el toque.
• disabled: si su valor es verdadero deshabilita todas las interacciones. El valor predeterminado es falso’.
• estilo: Se utiliza para especificar el estilo del componente TouchableHighlight
• activeOpacity: se utiliza para especificar el valor de opacidad de la vista envuelta cuando el toque está activo. Toma un valor entre 0 y 1 y el valor por defecto es 0,85.
• underlayColor: Se utiliza para especificar el color de la capa subyacente que se muestra cuando el toque está activo.

Ahora comencemos con la implementación:

• Paso 1: Abra su terminal e instale expo-cli con el siguiente comando.

  npm install -g expo-cli

• Paso 2: ahora cree un proyecto con el siguiente comando.

  expo init TouchableHighlightDemo

• Paso 3: Ahora ve a la carpeta de tu proyecto, es decir, TouchableHighlightDemo

  cd TouchableHighlightDemo

Estructura del proyecto: Tendrá el siguiente aspecto:

Ejemplo: Ahora implementemos TouchableHighlight. En el siguiente ejemplo, tenemos un botón, y cuando el usuario hace clic en él, se demuestra la funcionalidad TouchableHighlight.

import React from 'react';
import { StyleSheet,
         Text, 
         View, 
         TouchableHighlight, 
         Alert } from 'react-native';
  
export default function App() {
  return (
    <View style={styles.container}>
  
      <TouchableHighlight onPress={() => {
        Alert.alert("Touchable Highlight pressed.");
      }}
        style={styles.touchable}
        activeOpacity={0.5}
        underlayColor="#67c904"
      >
        <Text style={styles.text}>Click Me!</Text>
      </TouchableHighlight>
    </View>
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  touchable: {
    height: 50,
    width: 200,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#4287f5'
  },
  text: {
    color: "#fff"
  }
});

Inicie el servidor utilizando el siguiente comando.

npm run android

Salida: si su emulador no se abrió automáticamente, debe hacerlo manualmente. Primero, vaya a su estudio de Android y ejecute el emulador. Ahora inicie el servidor de nuevo.

Referencia: https://reactnative.dev/docs/touchablehighlight