Módulo 2 BÁSICO

Atividade 6: Text e View

Os blocos de construção fundamentais do React Native.

🎯 Objetivos desta aula

  • ✓ Entender o que são os componentes Text e View
  • ✓ Aprender como o React Native estrutura os elementos na tela
  • ✓ Aprender a aninhar componentes (um dentro do outro)

🧱 Os Blocos de Construção

Se você já estudou HTML para sites, sabe que usamos <div> para agrupar coisas e <p> ou <h1> para textos. No React Native é diferente! Nós não usamos HTML, usamos Componentes Core.

📦

<View>

É o container fundamental. Pense nela como uma caixa. Ela serve para agrupar outros componentes, criar layouts e estilizar partes da tela (como fundo, bordas e margens).

(Equivale a uma <div> no HTML)
📝

<Text>

O único componente capaz de exibir palavras na tela. Você não pode colocar texto solto dentro de uma View, ele precisa sempre estar circundado por tags <Text>.

(Equivale a um <p> ou <span> no HTML)

🚨 Regra de Ouro: Lembre-se sempre de IMPORTAR os componentes do `react-native` antes de usá-los! Ex: import { View, Text } from 'react-native';

💻 Exemplo Prático

Veja como aninhar (colocar um dentro do outro) textos em estruturas de Views:

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

export default function App() {
  return (
    // Esta é a View exterior (a tela inteira)
    <View style={styles.container}>
      
      <Text style={styles.titulo}>Olá, Mundo Mobile!</Text>
      
      {/* Esta é uma View interior (uma caixa menor) */}
      <View style={styles.caixaDetalhe}>
        <Text style={styles.textoNormal}>Este texto está dentro de uma caixa menor.</Text>
        <Text style={styles.textoDestaque}>Podemos ter vários Textos na mesma View!</Text>
      </View>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20
  },
  titulo: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#333'
  },
  caixaDetalhe: {
    backgroundColor: '#f0f0f0',
    padding: 20,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#ddd'
  },
  textoNormal: {
    fontSize: 16,
    color: '#666',
    marginBottom: 10
  },
  textoDestaque: {
    fontSize: 16,
    color: '#0066cc',
    fontWeight: 'bold'
  }
});

Copie o código acima, abra o Expo Snack, cole no App.js e veja o resultado!

🎮 Desafios Práticos

Agora é sua vez de colocar a mão na massa no Expo Snack. Complete os 3 desafios abaixo usando o código de exemplo. Não avance sem tentar!

DESAFIO 1

Modificar 🛠️

O título atual é "Olá, Mundo Mobile!".

  • Modifique o texto do Título Principal para o seu Nome completo.
  • Modifique a cor de fundo (backgroundColor) da caixaDetalhe para '#e6f7ff'.
DESAFIO 2

Melhorar 🚀

Vamos expandir o que já temos adicionando novos elementos.

  • Adicione um terceiro elemento <Text> dentro da caixaDetalhe.
  • Defina o estilo desse texto novo para usar as propriedades do estilo textoNormal, mas diga qual é sua comida favorita nele.
DESAFIO 3

Criar ✨

Teste sua lógica. Crie uma nova estrutura fora da primeira caixa.

  • Abaixo do fechamento da primeira caixa (</View>), mas ainda dentro da View principal, crie uma nova <View>.
  • Dentro dela, coloque um <Text> escrito "Meu primeiro app React Native!".
Mostrar dica 👀
Lembre-se: no return a estrutura principal de uma tela só pode retornar UM ÚNICO elemento raiz. Por isso a <View style={styles.container}> abraça tudo! Todas as novas caixas devem ficar DENTRO dela.

📝 Quiz - Teste seus conhecimentos

Anterior ← Atividade 5 Próxima Atividade 7 →