El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Navegador de Cajón

Siguiente ►
►

En esta lección, aprenderemos a implementar un Navegador de Cajón (Drawer Navigator) en una aplicación de React Native utilizando la biblioteca react-navigation. El Navegador de Cajón es una forma popular de navegación que permite a los usuarios acceder a diferentes secciones de la aplicación a través de un menú deslizable desde el borde de la pantalla.

Objetivos de Aprendizaje

  • Comprender qué es un Navegador de Cajón y cuándo usarlo.
  • Configurar un Navegador de Cajón en una aplicación de React Native.
  • Personalizar el contenido y el estilo del cajón.

¿Qué es un Navegador de Cajón?

Un Navegador de Cajón es un componente de navegación que permite a los usuarios deslizar un menú desde el borde de la pantalla para acceder a diferentes secciones de la aplicación. Es especialmente útil en aplicaciones con múltiples secciones o categorías.

Configuración del Navegador de Cajón

Paso 1: Instalación de Dependencias

Primero, necesitamos instalar las dependencias necesarias para react-navigation y el Navegador de Cajón.

npm install @react-navigation/native @react-navigation/drawer
npm install react-native-gesture-handler react-native-reanimated

Paso 2: Configuración Básica

A continuación, configuramos el Navegador de Cajón en nuestra aplicación. Creamos un archivo App.js con el siguiente contenido:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeScreen from './screens/HomeScreen';
import ProfileScreen from './screens/ProfileScreen';

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Profile" component={ProfileScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Paso 3: Creación de Pantallas

Creamos dos pantallas simples, HomeScreen y ProfileScreen, en la carpeta screens.

HomeScreen.js

import React from 'react';
import { View, Text, Button } from 'react-native';

export default function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Profile"
        onPress={() => navigation.navigate('Profile')}
      />
    </View>
  );
}

ProfileScreen.js

import React from 'react';
import { View, Text, Button } from 'react-native';

export default function ProfileScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Profile Screen</Text>
      <Button
        title="Go to Home"
        onPress={() => navigation.navigate('Home')}
      />
    </View>
  );
}

Paso 4: Personalización del Cajón

Podemos personalizar el contenido y el estilo del cajón utilizando las opciones disponibles en Drawer.Navigator.

Personalización del Contenido

Podemos agregar un contenido personalizado al cajón utilizando la propiedad drawerContent.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList } from '@react-navigation/drawer';
import HomeScreen from './screens/HomeScreen';
import ProfileScreen from './screens/ProfileScreen';

const Drawer = createDrawerNavigator();

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      {/* Aquí puedes agregar más elementos personalizados */}
    </DrawerContentScrollView>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />}>
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Profile" component={ProfileScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Personalización del Estilo

Podemos personalizar el estilo del cajón utilizando las propiedades drawerStyle y drawerContentOptions.

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        drawerStyle={{
          backgroundColor: '#c6cbef',
          width: 240,
        }}
        drawerContentOptions={{
          activeTintColor: '#e91e63',
          itemStyle: { marginVertical: 5 },
        }}
      >
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Profile" component={ProfileScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Ejercicio Práctico

Ejercicio 1: Agregar una Nueva Pantalla

  1. Crea una nueva pantalla llamada SettingsScreen.
  2. Agrega SettingsScreen al Navegador de Cajón.
  3. Personaliza el cajón para que tenga un fondo de color diferente y un estilo de texto activo.

Solución

  1. Crear SettingsScreen.js:
import React from 'react';
import { View, Text } from 'react-native';

export default function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings Screen</Text>
    </View>
  );
}
  1. Agregar SettingsScreen al Navegador de Cajón en App.js:
import SettingsScreen from './screens/SettingsScreen';

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        drawerStyle={{
          backgroundColor: '#f0f0f0',
          width: 240,
        }}
        drawerContentOptions={{
          activeTintColor: '#ff6347',
          itemStyle: { marginVertical: 5 },
        }}
      >
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Profile" component={ProfileScreen} />
        <Drawer.Screen name="Settings" component={SettingsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Conclusión

En esta lección, hemos aprendido a configurar y personalizar un Navegador de Cajón en una aplicación de React Native. Ahora puedes implementar un menú deslizable en tus aplicaciones para mejorar la navegación y la experiencia del usuario. En la próxima lección, exploraremos cómo pasar parámetros a las rutas en React Navigation.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados