Módulo 2 BÁSICO

Atividade 7: Estilização com StyleSheet

Transformando textos e caixas sem graça em designs bonitos!

🎯 Objetivos desta aula

  • ✓ Entender a diferença entre CSS da web e a estilização do React Native
  • ✓ Usar StyleSheet.create() para organizar a aparência do app
  • ✓ Aprender as propriedades básicas: cores, padding, margem e bordas arredondadas

🎨 CSS vs React Native Styles

Se você já usou CSS, o React Native vai parecer familiar, mas com duas diferenças cruciais:

Na Web (CSS normal)

Usamos kebab-case (com hífens) e unidades mistas.

.caixa {
  background-color: blue;
  border-radius: 10px;
  font-size: 16px;
}

No React Native

Usamos camelCase (sem hífens) e números sem unidade (pixels viram pontos padrão).

caixa: {
  backgroundColor: 'blue',
  borderRadius: 10,
  fontSize: 16
}

🧐 Resumo: No React Native, todo estilo é apenas um Objeto JavaScript. O StyleSheet.create() apenas ajuda a deixar a re-renderização mais rápida e valida os nomes internamente.

💻 Exemplo Prático

Veja como usamos múltiplos estilos em um cartão estilizado:

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

export default function App() {
  return (
    <View style={styles.fundoTela}>
      
      <View style={styles.cartao}>
        <Text style={styles.tituloCartao}>Aviso Importante</Text>
        <Text style={styles.textoCartao}>
          Hoje vamos aprender a deixar os apps mobile super bonitos!
        </Text>
      </View>

    </View>
  );
}

const styles = StyleSheet.create({
  fundoTela: {
    flex: 1,           // Ocupa toda a tela
    justifyContent: 'center', // Centraliza vertical
    alignItems: 'center',     // Centraliza horizontal
    backgroundColor: '#3b82f6', // Azul Tailwind (bg-blue-500)
    padding: 20
  },
  cartao: {
    backgroundColor: 'white',
    padding: 25,             // Espaço interno (do texto até a borda)
    borderRadius: 16,        // Bordas arredondadas (como Tailwind rounded-xl)
    borderWidth: 2,          // Espessura da borda
    borderColor: '#1d4ed8',  // Cor da borda
    width: '100%',           // Ocupa a largura total (respeitando o padding do pai)
  },
  tituloCartao: {
    fontSize: 22,
    fontWeight: 'bold',
    color: '#1e293b',       // bg-slate-800
    marginBottom: 10        // Espaço abaixo do título (empurra o texto de baixo)
  },
  textoCartao: {
    fontSize: 16,
    color: '#475569',       // bg-slate-600
    lineHeight: 24          // Altura da linha (espaço entre frases)
  }
});

🎮 Desafios Práticos

Copie o código base e resolva os desafios no Expo Snack:

DESAFIO 1

Modificar 🛠️

Vamos alterar as cores (tema Dark Mode)!

  • Modifique o backgroundColor do cartao para '#1e293b' (Super escuro).
  • Modifique a cor do tituloCartao para '#ffffff' (Branco puro).
  • Modifique a cor do textoCartao para '#cbd5e1' (Cinza claro pastel).
DESAFIO 2

Melhorar 🚀

Vamos adicionar uma Tag de status visual indicando que o aviso é "Urgente".

  • Acima do Título do cartão (ainda dentro do <View style={styles.cartao}>), adicione um novo <Text>URGENTE</Text>.
  • Crie um novo objeto de estilo (ex: tagUrgente) lá embaixo no StyleSheet.create().
  • Estilize essa tag: fundo vermelho ('#ef4444'), texto branco, padding de 5, com letras em negrito e tamanho da fonte 12. Use ele no texto urgente!
DESAFIO 3

Criar ✨

Aplique margens externas.

  • A borda que fica em volta da tag URGENTE deve se afastar do Título de baixo.
  • Adicione a propriedade marginBottom: 15 ao objeto de estilo da sua `tagUrgente`. Percebe o que aconteceu? O Margin empurra tudo que está embaixo dele! Pad, no entanto, cria enchimento para dentro.

📝 Quiz - Teste seus conhecimentos

Anterior ← Atividade 6 Próxima Atividade 8 →