Módulo 2 BÁSICO

Atividade 9: Botões Interativos

Se o usuário toca, o app tem que responder! Como criar botões clicáveis no mobile.

🎯 Objetivos desta aula

  • ✓ Usar os componentes Button, TouchableOpacity e Pressable
  • ✓ Capturar cliques via propriedade onPress
  • ✓ Exibir alertas nativos rápidos do sistema

👆 Componentes de Clique

Muitos novatos tentam colocar propriedades como onClick em caixas <View> e ficam confusos quando não funciona. No React Native, apenas "Elementos Clicáveis Específicos" capturam toques (usando a propriedade onPress). Existem 3 principais:

1. <Button /> (O nativo sem graça)

Super fácil de usar, mas NÃO pode ser estilizado profundamente e muda de forma se você abre no Android ou iOS.

<Button title="Clique-me" color="red" onPress={suaFuncao} />

2. <TouchableOpacity> (O mais amado ❤️)

Funciona exatamente como uma <View> onde você pode aplicar cor, border-radius e formatar o texto dento dele do jeito que quiser! Quando tocado, ele fica levemente transparente (gera Opacidade) dando um feedback visual excelente ao usuário.

<TouchableOpacity style={styles.botaoBonito} onPress={suaFuncao}>
  <Text style={styles.textoDoBotao}>Confirmar</Text>
</TouchableOpacity>

3. <Pressable> (O mais poderoso)

O futuro dos botões. Permite saber se o dedo do usuário "acabou de encostar na tela" (onPressIn) ou se "pressionou e segurou por muito tempo" (onLongPress). Recomendado para cenários complexos.

🧐 Atenção ao case: Na web é onClick. No app (touch) é onPress!

💻 Exemplo Prático

Neste exemplo usaremos Alertas do sistema, e você vai comparar a visual de um botão básico com um botão totalmente customizado usando TouchableOpacity:

App.js 
import React from 'react';
import { View, Text, Button, TouchableOpacity, Alert, StyleSheet } from 'react-native';

export default function App() {
  
  // Nossas funções (ações)
  const clicarBasico = () => {
    Alert.alert("Sucesso", "Você clicou no botão Padrão do sistema!");
  };

  const clicarPersonalizado = () => {
    Alert.alert("Eba!", "Você clicou no botão Bonito! 🚀");
  };

  // Render da tela
  return (
    <View style={styles.container}>
      
      <Text style={styles.titulo}>Teste os Botões</Text>
      
      {/* 1. Botão Padrão Sem Graça */}
      <Button 
        title="Botão do Sistema" 
        onPress={clicarBasico} 
      />

      <View style={styles.espaco} />

      {/* 2. Botão Customizado */}
      <TouchableOpacity 
        style={styles.botaoCustomizado} 
        onPress={clicarPersonalizado}
        activeOpacity={0.7}
      >
        <Text style={styles.textoBotao}>Botão Customizado ✨</Text>
      </TouchableOpacity>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  titulo: {
    fontSize: 22,
    fontWeight: 'bold',
    marginBottom: 30
  },
  espaco: {
    height: 40 // Apenas empurrar os elementos
  },
  botaoCustomizado: {
    backgroundColor: '#8b5cf6', // Roxo legal
    paddingVertical: 15,        // Espaço interno em cima/baixo
    paddingHorizontal: 30,      // Espaço interno direita/esquerda
    borderRadius: 30,           // Botão em "pílula"
    elevation: 3                // Sombra no Android
  },
  textoBotao: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold'
  }
});

🎮 Desafios Práticos

Copie o código base e trabalhe a lógica de botões no Snack:

DESAFIO 1

Modificar 🛠️

  • Localize as constantes de função criadas no início do javascript (`clicarPersonalizado`, por exemplo). Altere a mensagem do alerta (`Alert.alert`) nela para o seu gosto ("Olá fulano! Botão clicado").
  • Altere a propriedade `activeOpacity` do TouchableOpacity que por padrão deixei em 0.7... mude ela para `0.1` e clique. O que aconteceu com o efeito quando foi muito amassado né?
DESAFIO 2

Melhorar 🚀

Dois é bom, três é demais!

  • Copie as linhas de código do `` e crie um **novo** abaixo dele.
  • Crie no StyleSheet uma cópia dos estilos (`botaoCustomizado2` e `textoBotao2`), dessa vez mudando a cor de fundo dele para Vermelho e o borderRadius para zero, criando um botão quadradão do mal! Aplique na sua nova cópia.
DESAFIO 3

Criar ✨

Lógica independente.

  • Crie uma NOVA função no Javascript igualzinha a `clicarPersonalizado()`, chame ela de `clicarPerigoso()`.
  • Faça ela estourar um alerta "O Sistema Será Formatado!".
  • Coloque o nome da função no seu Botão Quadrado Vermelho na parte onPress={clicarPerigoso}!

📝 Quiz - Teste seus conhecimentos

Anterior ← Atividade 8 Próxima Atividade 10 →