</>Codding
React Native0/19 lições

Módulo 1 • Fundamentos

Navegação

Ferramentas e leitura
Leitura100%
Aula guiada50–75 min5 etapas práticas

Nesta aula, você vai compreender Navegação com explicação progressiva, exemplo resolvido, checagens e prática. Nada de apenas copiar: cada etapa prepara a próxima.

Antes de começar: Leia a aula anterior do módulo se algum termo parecer novo. Você pode testar o exemplo antes de continuar.

Ao terminar, você vai conseguir

  • Explicar Navegação com suas próprias palavras
  • Reconhecer as partes importantes em um exemplo real
  • Identificar e corrigir os erros mais frequentes
  • Aplicar o conteúdo em uma atividade prática
1

Entrada

Reconheça os dados e condições disponíveis.

2

Processamento

Use Navegação para transformar a entrada.

3

Saída

Confira o resultado e os casos que podem falhar.

0/6 atividades
1

Entenda o problema

O que é Navegação

React Native usa os mesmos conceitos do React (componentes, props, estado), mas renderiza componentes nativos: nada de div e p — são View, Text, Image, Pressable.

Cheque seu entendimento

Qual componente substitui a <div> no React Native?

1 de 5

O que você aprendeu

  • React Native usa os mesmos conceitos do React (componentes, props, estado), mas renderiza componentes nativos: nada de div e p — são View, Text, Image, Pressable.
  • Mesma lógica de estado do React web; muda o vocabulário de componentes e o estilo em objeto.
  • Evite: Tentar usar tags HTML (div, span) — não existem.
  • Evite: Esquecer que o padrão do flexDirection é column.

Videoaulas sobre este tema

Se você aprende melhor assistindo, abrimos uma seleção de aulas em vídeo em português sobre exatamente este assunto.

Aula em vídeo sobre este temaVídeos em português explicando "Navegação" passo a passo.Vendo alguém programar issoExemplos práticos, com o código sendo escrito na tela.Playlist completa de React NativeCurso em vídeo do começo ao fim, para acompanhar junto com o módulo "Fundamentos".

Quiz rápido

0/2 • 0 certas

1. Qual componente substitui a <div> no React Native?

2. Qual é o flexDirection padrão no React Native?

Laboratório

1/4

1. Faça funcionar

Laboratório de Navegação: execute o exemplo, identifique entrada, processamento e saída e altere pelo menos um valor para observar como o resultado muda.

Abrir no playground
  • Checkpoints da prática (1/4)
  • Escreva sua versão a partir do modeloO texto do editor ainda é igual ao modelo inicial. Altere pelo menos uma linha para que a prática conte como sua.
  • Nenhuma lacuna deixada em branco
  • Execute seu códigoClique em “Verificar resposta” para rodar seu código e comparar a saída com o esperado.
  • Resultado ainda não confereEsperado: o programa rodar sem erro. Se aparecer uma mensagem de erro, leia a última linha: ela indica a linha e o tipo do problema.

Escreva sua solução e clique em Verificar.

Tire sua dúvida

Cada resposta é conferida contra o material desta lição antes de aparecer. Sem IA por trás e sem inventar nada.

Navegação

React Native • Módulo 1: Fundamentos • Codding — material para estudo offline

Aluno: ______________________________ Data: ____ / ____ / ______

Nesta aula, você vai compreender Navegação com explicação progressiva, exemplo resolvido, checagens e prática. Nada de apenas copiar: cada etapa prepara a próxima.

Objetivos da aula

  • Explicar Navegação com suas próprias palavras
  • Reconhecer as partes importantes em um exemplo real
  • Identificar e corrigir os erros mais frequentes
  • Aplicar o conteúdo em uma atividade prática

Pré-requisito: Leia a aula anterior do módulo se algum termo parecer novo. Você pode testar o exemplo antes de continuar. • Duração: 50–75 min

Explicação passo a passo

1. O que é Navegação

React Native usa os mesmos conceitos do React (componentes, props, estado), mas renderiza componentes nativos: nada de div e p — são View, Text, Image, Pressable.

Checkpoint: Qual componente substitui a <div> no React Native? — Resposta: View

2. Como pensar antes de fazer

Estilos usam objetos JavaScript com um subconjunto de CSS, sempre em Flexbox (com flexDirection: 'column' como padrão, ao contrário da web). Não existe cascata: cada componente carrega o próprio estilo.

Dica: Não decore a forma. Tente explicar com suas palavras qual problema “Navegação” resolve.

3. Exemplo completo, do início ao resultado

Navegação é uma biblioteca à parte (stack, tabs, drawer) que gerencia a pilha de telas e os gestos nativos de voltar. Pense em cada tela como um componente que recebe parâmetros da rota.

import { View, Text, Pressable, StyleSheet } from "react-native";
import { useState } from "react";

export default function Contador() {
  const [n, setN] = useState(0);
  return (
    <View style={s.box}>
      <Text style={s.num}>{n}</Text>
      <Pressable style={s.btn} onPress={() => setN(n + 1)}>
        <Text style={s.txt}>Somar</Text>
      </Pressable>
    </View>
  );
}

const s = StyleSheet.create({
  box: { flex: 1, alignItems: "center", justifyContent: "center", gap: 16 },
  num: { fontSize: 48, fontWeight: "700" },
  btn: { backgroundColor: "#2563eb", paddingHorizontal: 20, paddingVertical: 12, borderRadius: 12 },
  txt: { color: "white", fontWeight: "600" },
});
TrechoO que faz
import { View, Text, Pressable, StyleSheet } from "react-native";Carrega um recurso que será utilizado nas próximas linhas.
import { useState } from "react";Carrega um recurso que será utilizado nas próximas linhas.
export default function Contador() {Cria uma estrutura reutilizável para organizar comportamento.
const [n, setN] = useState(0);Cria ou atualiza um valor que será usado pelo restante do exemplo.
return (Produz ou devolve o resultado que permite conferir a execução.
<View style={s.box}>Define uma parte da estrutura visível ou semântica da página.
<Text style={s.num}>{n}</Text>Define uma parte da estrutura visível ou semântica da página.
<Pressable style={s.btn} onPress={() => setN(n + 1)}>Define uma parte da estrutura visível ou semântica da página.

Dica: Mesma lógica de estado do React web; muda o vocabulário de componentes e o estilo em objeto.

Checkpoint: Qual é o flexDirection padrão no React Native? — Resposta: column

4. Do detalhe para o todo

O que mais diferencia mobile: permissões, estados offline, tamanhos de tela e ciclo de vida do app em background. Teste em aparelho real cedo — o emulador esconde problemas de desempenho e de toque.

5. Erros comuns e como corrigi-los

1. Tentar usar tags HTML (div, span) — não existem. 2. Esquecer que o padrão do flexDirection é column. 3. Testar só no emulador e descobrir a lentidão no lançamento.

Dica: Quando algo der errado, compare uma diferença por vez com o exemplo. Evite mudar várias partes ao mesmo tempo.

Prática guiada

1. 1. Faça funcionar

Laboratório de Navegação: execute o exemplo, identifique entrada, processamento e saída e altere pelo menos um valor para observar como o resultado muda.

import { View, Text, Pressable, StyleSheet } from "react-native";
import { useState } from "react";

export default function Contador() {
  const [n, setN] = useState(0);
  return (
    <View style={s.box}>
      <Text style={s.num}>{n}</Text>
      <Pressable style={s.btn} onPress={() => setN(n + 1)}>
        <Text style={s.txt}>Somar</Text>
      </Pressable>
    </View>
  );
}

const s = StyleSheet.create({
  box: { flex: 1, alignItems: "center", justifyContent: "center", gap: 16 },
  num: { fontSize: 48, fontWeight: "700" },
  btn: { backgroundColor: "#2563eb", paddingHorizontal: 20, paddingVertical: 12, borderRadius: 12 },
  txt: { color: "white", fontWeight: "600" },
});

Dica: Volte ao exemplo resolvido e compare a estrutura. Tentar usar tags HTML (div, span) — não existem.

2. 2. Preveja antes de testar

Sem executar, explique qual resultado o exemplo de Navegação deve produzir e qual parte é responsável por ele.

Minha previsão:

A parte responsável pelo resultado:

Como vou conferir:

Dica: Use o modelo mental da aula: entrada, transformação e evidência observável.

3. 3. Encontre e corrija o erro

Use o exemplo de Navegação, identifique um risco citado na aula e registre ou implemente a correção.

import { View, Text, Pressable, StyleSheet } from "react-native";
import { useState } from "react";

export default function Contador() {
  const [n, setN] = useState(0);
  return (
    <View style={s.box}>
      <Text style={s.num}>{n}</Text>
      <Pressable style={s.btn} onPress={() => setN(n + 1)}>
        <Text style={s.txt}>Somar</Text>
      </Pressable>
    </View>
  );
}

const s = StyleSheet.create({
  box: { flex: 1, alignItems: "center", justifyContent: "center", gap: 16 },
  num: { fontSize: 48, fontWeight: "700" },
  btn: { backgroundColor: "#2563eb", paddingHorizontal: 20, paddingVertical: 12, borderRadius: 12 },
  txt: { color: "white", fontWeight: "600" },
});

Dica: Tentar usar tags HTML (div, span) — não existem.

4. 4. Aplique em um caso novo

Crie uma variação própria usando Navegação. Mude os dados ou o cenário e demonstre que o resultado continua correto.

import { View, Text, Pressable, StyleSheet } from "react-native";
import { useState } from "react";

export default function Contador() {
  const [n, setN] = useState(0);
  return (
    <View style={s.box}>
      <Text style={s.num}>{n}</Text>
      <Pressable style={s.btn} onPress={() => setN(n + 1)}>
        <Text style={s.txt}>Somar</Text>
      </Pressable>
    </View>
  );
}

const s = StyleSheet.create({
  box: { flex: 1, alignItems: "center", justifyContent: "center", gap: 16 },
  num: { fontSize: 48, fontWeight: "700" },
  btn: { backgroundColor: "#2563eb", paddingHorizontal: 20, paddingVertical: 12, borderRadius: 12 },
  txt: { color: "white", fontWeight: "600" },
});

Dica: Mantenha a estrutura que já funcionou e altere uma decisão por vez.

Revisão

  • React Native usa os mesmos conceitos do React (componentes, props, estado), mas renderiza componentes nativos: nada de div e p — são View, Text, Image, Pressable.
  • Mesma lógica de estado do React web; muda o vocabulário de componentes e o estilo em objeto.
  • Evite: Tentar usar tags HTML (div, span) — não existem.
  • Evite: Esquecer que o padrão do flexDirection é column.

Exemplo comentado

import { View, Text, Pressable, StyleSheet } from "react-native";
import { useState } from "react";

export default function Contador() {
  const [n, setN] = useState(0);
  return (
    <View style={s.box}>
      <Text style={s.num}>{n}</Text>
      <Pressable style={s.btn} onPress={() => setN(n + 1)}>
        <Text style={s.txt}>Somar</Text>
      </Pressable>
    </View>
  );
}

const s = StyleSheet.create({
  box: { flex: 1, alignItems: "center", justifyContent: "center", gap: 16 },
  num: { fontSize: 48, fontWeight: "700" },
  btn: { backgroundColor: "#2563eb", paddingHorizontal: 20, paddingVertical: 12, borderRadius: 12 },
  txt: { color: "white", fontWeight: "600" },
});

Mesma lógica de estado do React web; muda o vocabulário de componentes e o estilo em objeto.

Erros comuns

  • Tentar usar tags HTML (div, span) — não existem.
  • Esquecer que o padrão do flexDirection é column.
  • Testar só no emulador e descobrir a lentidão no lançamento.

Quiz e gabarito completo

  1. 1. Qual componente substitui a <div> no React Native?

    • a) Box
    • b) View
    • c) Container
    • d) Div

    Gabarito: b) View — View é o contêiner básico de layout.

  2. 2. Qual é o flexDirection padrão no React Native?

    • a) row
    • b) column
    • c) row-reverse
    • d) não há padrão

    Gabarito: b) column — Ao contrário da web, o padrão é column.

Codding • React Native • Navegação • Prova final e certificado em codding.lovable.app/cursos/react-native/prova