Touchables

Em React Native, os “touchables” são componentes que respondem a interações do usuário, como toques, pressões longas e deslizes. Existem diferentes tipos de touchables disponíveis para uso, cada um com um comportamento específico. Aqui estão alguns dos touchables mais comuns em React Native:

1. TouchableHighlight:

TouchableHighlight é um componente que muda de estilo quando é pressionado. Ele é frequentemente usado para criar botões que fornecem feedback visual ao usuário quando são tocados.

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

const MeuComponente = () => {
  const onPress = () => {
    console.log('TouchableHighlight Pressionado');
  };

  return (
    <View style={styles.container}>
      <TouchableHighlight
        style={styles.botao}
        onPress={onPress}
        underlayColor="lightblue"
      >
        <Text>TouchableHighlight</Text>
      </TouchableHighlight>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  botao: {
    backgroundColor: 'blue',
    padding: 20,
    borderRadius: 10,
  },
});

export default MeuComponente;

2. TouchableOpacity:

TouchableOpacity é um componente que reduz a opacidade do conteúdo quando pressionado. Ele é frequentemente usado para criar botões com feedback visual sutil.

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

const MeuComponente = () => {
  const onPress = () => {
    console.log('TouchableOpacity Pressionado');
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.botao}
        onPress={onPress}
      >
        <Text>TouchableOpacity</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  botao: {
    backgroundColor: 'blue',
    padding: 20,
    borderRadius: 10,
  },
});

export default MeuComponente;

3. TouchableWithoutFeedback:

TouchableWithoutFeedback é um componente que não fornece feedback visual quando é pressionado. Ele é frequentemente usado quando você deseja controlar completamente a aparência do componente.

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

const MeuComponente = () => {
  const onPress = () => {
    console.log('TouchableWithoutFeedback Pressionado');
  };

  return (
    <View style={styles.container}>
      <TouchableWithoutFeedback onPress={onPress}>
        <View style={styles.botao}>
          <Text>TouchableWithoutFeedback</Text>
        </View>
      </TouchableWithoutFeedback>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  botao: {
    backgroundColor: 'blue',
    padding: 20,
    borderRadius: 10,
  },
});

export default MeuComponente;

Estes são alguns dos touchables básicos em React Native. Cada um tem seu próprio uso e comportamento, então escolha o que melhor se adapta às necessidades do seu aplicativo. Além disso, você pode personalizar os estilos e comportamentos desses touchables de acordo com suas preferências.