Exercícios Drawer – Navegação entre telas

Aqui estão dois exercícios que utilizam os mesmos conceitos e comandos apresentados na atividade, com um nível de dificuldade similar. Eles ajudarão a avaliar a absorção do conhecimento sobre navegação com React Navigation e a criação de telas básicas.

Exercício 1: Aplicativo de Lista de Tarefas com Navegação por Gavetas

Descrição:

Crie um aplicativo com três telas usando createDrawerNavigator. As telas serão:

1. Tela de Tarefas: Exibe uma lista simples de tarefas (pode ser apenas textos estáticos, como “Comprar pão”, “Estudar React Native”, etc.).
2. Tela de Adicionar Tarefa: Exibe um texto simples como “Adicionar nova tarefa”.
3. Tela de Ajuda: Exibe um texto simples como “Precisa de ajuda? Contate-nos.”

Requisitos:

1. Use createDrawerNavigator para criar a navegação entre as três telas.
2. Adicione ícones personalizados para cada aba usando MaterialIcons.
3. Defina a cor da aba ativa como “blue” e a inativa como “gray”.
4. Oculte o cabeçalho padrão das telas.
5. Defina a tela inicial como a “Tela de Tarefas”.

Exemplo de Estrutura:

• App.js: Configuração do Drawer.Navigator.
• TelaTarefas.js: Exibe a lista de tarefas.
• TelaAdicionar.js: Exibe o texto “Adicionar nova tarefa”.
• TelaAjuda.js: Exibe o texto “Precisa de ajuda? Contate-nos.”

Exercício 2: Aplicativo de Notícias com Navegação por Gaveta

Descrição:

Crie um aplicativo com três telas usando createDrawerNavigator. As telas serão:

1. Tela de Notícias: Exibe um texto simples como “Últimas Notícias”.
2. Tela de Esportes: Exibe um texto simples como “Notícias de Esportes”.
3. Tela de Tecnologia: Exibe um texto simples como “Notícias de Tecnologia”.

Requisitos:

1. Use createDrawerNavigator para criar a navegação entre as três telas.
2. Adicione ícones personalizados para cada aba usando MaterialIcons (por exemplo, “article” para Notícias, “sports” para Esportes, “computer” para Tecnologia).
3. Defina a cor da aba ativa como “green” e a inativa como “lightgray”.
4. Oculte o cabeçalho padrão das telas.
5. Defina a tela inicial como a “Tela de Notícias”.

Exemplo de Estrutura:

• App.js: Configuração do .Drawer.Navigator.
• TelaNoticias.js: Exibe o texto “Últimas Notícias”.
• TelaEsportes.js: Exibe o texto “Notícias de Esportes”.
• TelaTecnologia.js: Exibe o texto “Notícias de Tecnologia”.

O que será avaliado:

1. Configuração do Navegador:
   • Uso correto de createDrawerNavigator e NavigationContainer.
   • Definição das telas com .Drawer.Screen.
   • Configuração de ícones e cores das abas.
2. Criação das Telas:
   • Criação de componentes funcionais para cada tela.
   • Uso de View, Text e StyleSheet para estruturar e estilizar as telas.
3. Funcionalidade:
   • Navegação entre as telas funcionando corretamente.
   • Ícones e cores das abas refletindo o estado ativo/inativo.
4. Organização do Código:
   • Código limpo, bem estruturado e com comentários explicativos (se necessário).

Dicas:

• Reutilize o código da atividade inicial como base.
• Consulte a documentação do React Navigation e da biblioteca de ícones @expo/vector-icons para referência.
• Teste o aplicativo no emulador do Expo ou dispositivo físico para garantir que a navegação está funcionando corretamente.