Tab Navigator

Actividades prácticas

1. Crea un Tab.Navigator con las pantallas HomeTab, Search, Notifications y Profile.
2. Añade iconos y tabBarBadge en al menos una pestaña.
3. Integra MainTabs dentro de un Stack y navega desde una tab a una pantalla del stack.

Bottom Tabs

bash
Copiar
1npm install @react-navigation/bottom-tabs

typescript
Copiar
1import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
2
3type TabParamList = {
4  HomeTab: undefined;
5  Search: undefined;
6  Notifications: undefined;
7  Profile: undefined;
8};
9
10const Tab = createBottomTabNavigator<TabParamList>();
11
12function MainTabs() {
13  return (
14    <Tab.Navigator
15      screenOptions={{
16        tabBarActiveTintColor: "#007AFF",
17        tabBarInactiveTintColor: "gray",
18        headerShown: false,
19      }}
20    >
21      <Tab.Screen
22        name="HomeTab"
23        component={HomeScreen}
24        options={{
25          tabBarLabel: "Inicio",
26          tabBarIcon: ({ color, size }) => (
27            <Text style={{ fontSize: size }}>🏠</Text>
28          ),
29          tabBarBadge: 3,
30        }}
31      />
32
33      <Tab.Screen
34        name="Search"
35        component={SearchScreen}
36        options={{
37          tabBarLabel: "Buscar",
38          tabBarIcon: ({ color, size }) => (
39            <Text style={{ fontSize: size }}>🔍</Text>
40          ),
41        }}
42      />
43
44      <Tab.Screen
45        name="Notifications"
46        component={NotificationsScreen}
47        options={{
48          tabBarLabel: "Notificaciones",
49          tabBarIcon: ({ color, size }) => (
50            <Text style={{ fontSize: size }}>🔔</Text>
51          ),
52          tabBarBadge: 5,
53        }}
54      />
55
56      <Tab.Screen
57        name="Profile"
58        component={ProfileScreen}
59        options={{
60          tabBarLabel: "Perfil",
61          tabBarIcon: ({ color, size }) => (
62            <Text style={{ fontSize: size }}>👤</Text>
63          ),
64        }}
65      />
66    </Tab.Navigator>
67  );
68}

Tabs + Stack Navigator

typescript
Copiar
1type RootStackParamList = {
2  MainTabs: undefined;
3  Details: { id: number };
4  Settings: undefined;
5};
6
7const Stack = createNativeStackNavigator<RootStackParamList>();
8
9export default function App() {
10  return (
11    <NavigationContainer>
12      <Stack.Navigator>
13        <Stack.Screen
14          name="MainTabs"
15          component={MainTabs}
16          options={{ headerShown: false }}
17        />
18        <Stack.Screen name="Details" component={DetailsScreen} />
19        <Stack.Screen name="Settings" component={SettingsScreen} />
20      </Stack.Navigator>
21    </NavigationContainer>
22  );
23}
24
25// Navegar desde un Tab a un Stack Screen
26function HomeScreen({ navigation }: any) {
27  return (
28    <TouchableOpacity onPress={() => navigation.navigate("Details", { id: 1 })}>
29      <Text>Ver Detalles</Text>
30    </TouchableOpacity>
31  );
32}