Módulo 4 INTERATIVIDADE

Atividade 20: Condicional (Esconder Elementos)

"Clique aqui para ver a senha". Aprenda como o State faz elementos inteiros aparecerem ou voltarem para o limbo do vazio.

🎯 Objetivos desta aula

  • ✓ Usar Estados Booleanos (true / false)
  • ✓ Criar funções Toggle (Alavanca que inverte valores)
  • ✓ Sintaxe de Operador Lógico `&&` e Ternário `? :` direto no Fluxo de Telas (JSX)

👻 O Operador Mágico da Visibilidade

Muitas abas funcionam baseado num clique. Ou uma aba está "Aberta/Aparecendo" ou ela está Mínimizada (Nula/Invisível). Para isso usamos o poderoso Hook de um booleano: const [taVisivel, setTaVisivel] = useState(false). E Injetamos ele no meio do HTML da nossa Tela para servir de "Guarda Costas" do nosso Título:

A Sintaxe E Comercial: `&&`

Dentro do nosso <Return> HTML não se pode escrever um if(visivel == true) return comum. O React inventou uma mágica usando Bigodes de Variáveis e Dois e-comerciais:

<View>

   { taVisivel &&  <Text> Eu sou o Segredo Oculto e Fui Revelado!! </Text> }

</View>

A Tática do `&&` diz ao React: "SE a variável for TRUE, desenhe as tags a frente dela. Se for FALSE desintegre as tags como se elas nunca tivessem existido no código."

🔌 O Interruptor (Toggle): Para não precisar ter 2 funções (Uma pra ligar e outra apagar), nós usamos a exclamação `!` do javascript. A exlamação inverte o valor de um boolean. Então a nossa função botão será literalmente: setTaVisivel( !taVisivel ); ("Torne a váriável visivél O CONTRÁRIO do que ela está agora"). E com um só botão fazemos a luz piscar infinito.

💻 Revelando a Imagem

Com o State "Controlando" a barreira `&&`, a tela vai explodir de dinamicidade. E de quebra usaremos ele no texto do botão atravé de um famoso If Ternário (O If de 1 linha):

ShowHide.js 
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, Image, StyleSheet } from 'react-native';

export default function App() {
  
  // Criando berço inicial: FALSO (Escondido)
  const [visivel, setVisivel] = useState(false);

  // Botão Interruptor que inverte. Se é true fica false.
  function alternar() {
      setVisivel(!visivel);
  }

  return (
    <View style={styles.container}>
       
       <TouchableOpacity style={styles.btn} onPress={alternar}>
          {/* USAMOS O IF DE UMA LINHA DE "PERGUNTA ?" NO MEIO DO NOME DO BOTÃO! */}
          <Text style={styles.btnTxt}>
              { visivel ? "Esconder Foto 🙈" : "Revelar Foto 🐵" }
          </Text>
       </TouchableOpacity>

       {/* A BARREIRA INTRANSÍVEL DO &&. SÓ PASSA O CÓDIGO SE O BOOLEAN FOR TRUE! */}
       { visivel && (
           <View style={styles.card}>
              <Image 
                 source={{uri:"https://reactnative.dev/img/tiny_logo.png"}} 
                 style={{width:100, height:100}} 
              />
              <Text style={{color:'white', marginTop:10}}>Surpresa!</Text>
           </View>
       ) }
       
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#0f172a', alignItems: 'center', justifyContent: 'center' },
  btn: { backgroundColor: '#8b5cf6', padding: 20, borderRadius: 10, marginBottom: 30 },
  btnTxt: { color: 'white', fontWeight: 'bold', fontSize: 18 },
  card: { padding: 30, backgroundColor: '#334155', borderRadius: 20, alignItems:'center' }
});

🎮 Desafios Práticos

DESAFIO 1

Inversão de Valores 🛠️

  • Copie e Execute o APP no Site do EXPO. Tente Clicar Repetidas Vezes..
  • Brinque com a Barreira do E-Comercial Duplo &&: mude-o para a exclamação do NOT Javascript: {!visivel && (...)}. O que acontece agora com a foto? De repente o App inteiro inverteu a sua lógica!
DESAFIO 2

Ternário e Segurança 🚀

Volte o código ao original. Agora altere as strings do Ternário Pergunta (?).

  • O Ternário `TIPO ? SIM : NÃO` é perfeito para mostrar 1 de 2 Opções de String.
  • Tente criar no seu caderno 1 Ternário que mostre a sua Senha e um cadeado no `SIM`, ou a palavra secreta '*Senha Oculta*' no caso de ela não estar visível no lado do `NÃO` do ternário, alterando a função toggle!

📝 Quiz - Modificadores

Anterior ← Atividade 19 Hora do Desafio Avaliação Módulo 4 📝