Atividade 13: Navegação em Abas (Tabs)
Todo mundo ama aquele menu inferior bonitinho (Bottom Tabs) que o Instagram ou WhatsApp usam!
🎯 Objetivos desta aula
-
✓
Configurar o Navigator estilo
<Tab.Navigator />. - ✓ Alterar as cores ativas e inativas dos botões da barra.
-
✓
Usar os ícones prontos do Expo (
@expo/vector-icons).
🗂️ As Abas Inferiores
Mudar de "Pilha (Stack)" para "Abas (Tabs)" é muito fácil. A lógica de envelopar as telas dentro do
<Tab.Navigator> é exatamente a mesma coisa que do Stack. O milagre quem faz é a
biblioteca que gera o visual automaticamente pra você na base da tela.
As Cores do Ativado e Inativado (screenOptions)
Como a tab bar vai saber a cor que ela pinta se estiver selecionada (como o Instagram fica branco) ou inativa (como o instagram fica cinza)? Usamos as opções do Navigator pai! Ele tem duas variáveis mágicas prontas para isso:
<Tab.Navigator
screenOptions={{
tabBarActiveTintColor: '#f43f5e', // Rosa lindo se eu cliquei na aba
tabBarInactiveTintColor: 'gray', // Cinza feio se for as abas não clicadas
}}
>
...
</Tab.Navigator>Usando Ícones do Expo
Textos são chatos. Ícones são rápidos de entender. O Expo já vem de fábrica com TODOS os pacotes de fontes de ícones do mercado (FontAwesome, Ionicons, Material, etc).
Passamos uma função especial chamada tabBarIcon na configuração de Options da Tela para injetar
os ícones que mudam de cor:
import { Ionicons } from '@expo/vector-icons'; // Importe a caixinha de ferramentas!
// Lá nas opções da sua Tela
options={{
tabBarLabel: 'Perfil', // Texto miúdo que fica debaixo do ícone (opicional)
tabBarIcon: ({ color }) => (
<Ionicons name="person" size={24} color={color} />
),
}}Repare que nós passamos esse `{ color }`! Ele recebe a cor Inactive/Active do Container Pai lá de cima para pintar automaticamente o ícone!
🧐 Dica de Mestre: E se eu quiser Stack e Tabs? Sem problemas! Você pode jogar
uma <Stack.Navigator> inteirinha DENTRO como tela do
seu <Tab.Screen /> fazendo navegações híbridas!
💻 Exemplo Prático (Snack Clássico)
Com a estrutura pronta do App e Navigation BottomTabs importada, vamos rodar ele no Expo!
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';
// Nossas Telas Básicas (Normalmente estariam em arquivos separados!)
function FeedScreen() {
return (
<View style={styles.telaFeed}><Text>Meu Feed de Fotos!</Text></View>
);
}
function MessagesScreen() {
return (
<View style={styles.telaMenu}><Text style={{color: 'white'}}>Caixa de Entrada Vazia</Text></View>
);
}
// 1. Criamos a Fabrica de Abas
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
{/* 2. Navigator com Tema das Cores */}
<Tab.Navigator
screenOptions={{
tabBarActiveTintColor: '#8b5cf6', // Roxo legal pra quem estiver ativo
tabBarInactiveTintColor: '#9ca3af', // Cinza pra inativos
headerShown: true, // Mostra o Header em cima? Sim.
}}
>
{/* Aba 1 */}
<Tab.Screen
name="Feed"
component={FeedScreen}
options={{
tabBarLabel: 'Início',
tabBarIcon: ({ color }) => <Ionicons name="home" size={26} color={color} />,
}}
/>
{/* Aba 2 */}
<Tab.Screen
name="Messages"
component={MessagesScreen}
options={{
tabBarLabel: 'Mensagens',
tabBarBadge: 3, // Bolinha de notificações nativa!!!
tabBarIcon: ({ color }) => <Ionicons name="chatbubbles" size={26} color={color} />,
}}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
telaFeed: { flex: 1, backgroundColor: '#f0f9ff', justifyContent: 'center', alignItems: 'center' },
telaMenu: { flex: 1, backgroundColor: '#1e293b', justifyContent: 'center', alignItems: 'center' }
});🎮 Desafios Práticos
A Navigation Bottom Tabs faz 90% dos aplicativos do mercado hoje. Pratique a customização dela!
Modificar 🛠️
- Lá no topo nas declarações
screenOptionsnós configuramos se o Header superior pode aparecer ou não:headerShown: true. Altere para `false` e veja a tela esticar! Ideal para designs como o TikTok. - Nas configurações da Tela de "Messages", preste atenção na tag incrível
tabBarBadge: 3(As bolinhas vermelhas do iconezinho). Transforme "3" em "99+" pra simular que você é famoso. É uma string, vai pedir aspas.
Melhorar 🚀
- Abra o site https://icons.expo.fyi no seu computador e pesquise dois ícones que quiser.
- Substitua os ícones 'home' e 'chatbubbles' utilizados atualmente (Cuidado pra ver a qual biblioteca ele pertence (AntDesign, Ionicons, Entypo, MaterialIcons). Se o ícone não for Ionicons, precisará importar a lib correta ali no começo e usá-la.
Criar ✨
Faça do Zero: A nova aba Perfil.
- Construa uma function
PerfilScreen()de corações. - Insira uma terçeira
<Tab.Screen />e faça com que o ícone dela seja a tag "person". O Menu vai redistribuir o espaço para caber tudo sozinho!