Drawer Navigator y Navegación Avanzada

Actividades prácticas

1. Implementa un Drawer.Navigator con al menos Home, Profile y Settings.
2. Crea CustomDrawerContent que muestre avatar, nombre y un botón de Cerrar Sesión.
3. Configura app.json para el esquema myapp:// y prueba una ruta profunda en el emulador.

Drawer Navigator

bash
Copiar
1npm install @react-navigation/drawer
2npm install react-native-gesture-handler react-native-reanimated

typescript
Copiar
1import { createDrawerNavigator } from "@react-navigation/drawer";
2
3const Drawer = createDrawerNavigator();
4
5function MyDrawer() {
6  return (
7    <Drawer.Navigator
8      screenOptions={{
9        drawerActiveTintColor: "#007AFF",
10        drawerStyle: {
11          backgroundColor: "#f5f5f5",
12        },
13      }}
14    >
15      <Drawer.Screen
16        name="Home"
17        component={HomeScreen}
18        options={{
19          drawerLabel: "Inicio",
20          drawerIcon: ({ color, size }) => (
21            <Text style={{ fontSize: size }}>🏠</Text>
22          ),
23        }}
24      />
25      <Drawer.Screen
26        name="Profile"
27        component={ProfileScreen}
28        options={{
29          drawerLabel: "Mi Perfil",
30          drawerIcon: ({ color, size }) => (
31            <Text style={{ fontSize: size }}>👤</Text>
32          ),
33        }}
34      />
35      <Drawer.Screen
36        name="Settings"
37        component={SettingsScreen}
38        options={{
39          drawerLabel: "Configuración",
40          drawerIcon: ({ color, size }) => (
41            <Text style={{ fontSize: size }}>⚙️</Text>
42          ),
43        }}
44      />
45    </Drawer.Navigator>
46  );
47}

Custom Drawer Content

typescript
Copiar
1import {
2  DrawerContentScrollView,
3  DrawerItemList,
4} from "@react-navigation/drawer";
5
6function CustomDrawerContent(props: any) {
7  return (
8    <DrawerContentScrollView {...props}>
9      <View style={styles.drawerHeader}>
10        <Image
11          source={{ uri: "https://via.placeholder.com/80" }}
12          style={styles.avatar}
13        />
14        <Text style={styles.userName}>Juan Pérez</Text>
15        <Text style={styles.userEmail}>juan@example.com</Text>
16      </View>
17
18      <DrawerItemList {...props} />
19
20      <View style={styles.drawerFooter}>
21        <TouchableOpacity style={styles.logoutButton}>
22          <Text style={styles.logoutText}>Cerrar Sesión</Text>
23        </TouchableOpacity>
24      </View>
25    </DrawerContentScrollView>
26  );
27}
28
29<Drawer.Navigator drawerContent={(props) => <CustomDrawerContent {...props} />}>
30  {/* Screens */}
31</Drawer.Navigator>;

Deep Linking

typescript
Copiar
1// app.json
2{
3  "expo": {
4    "scheme": "myapp",
5    "android": {
6      "intentFilters": [
7        {
8          "action": "VIEW",
9          "data": [
10            {
11              "scheme": "myapp",
12              "host": "*"
13            }
14          ],
15          "category": ["BROWSABLE", "DEFAULT"]
16        }
17      ]
18    }
19  }
20}
21
22// App.tsx
23const linking = {
24  prefixes: ['myapp://', 'https://myapp.com'],
25  config: {
26    screens: {
27      Home: 'home',
28      Details: 'details/:id',
29      Profile: 'profile/:userId'
30    }
31  }
32}
33
34<NavigationContainer linking={linking}>
35  {/* Navigation */}
36</NavigationContainer>
37
38// URLs funcionarán así:
39// myapp://details/123
40// https://myapp.com/profile/456