El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem a utilitzar el Drawer Navigator a React Native per crear una navegació lateral que permeti als usuaris accedir fàcilment a diferents seccions de l'aplicació. El Drawer Navigator és una eina poderosa per millorar l'experiència d'usuari en aplicacions amb múltiples pantalles.

Objectius

Comprendre què és el Drawer Navigator.
Configurar el Drawer Navigator en una aplicació React Native.
Afegir pantalles al Drawer Navigator.
Personalitzar el Drawer Navigator.

Què és el Drawer Navigator?

El Drawer Navigator és un component de navegació que permet als usuaris obrir un menú lateral (drawer) des de la vora de la pantalla. Aquest menú pot contenir enllaços a diferents pantalles o seccions de l'aplicació.

Configuració del Drawer Navigator

Instal·lació de les dependències necessàries

Abans de començar, necessitem instal·lar les biblioteques necessàries per utilitzar el Drawer Navigator. Executa les següents comandes al terminal:

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

Configuració bàsica

Importar les biblioteques necessàries:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { View, Text } from 'react-native';

Crear algunes pantalles de mostra:

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

function ProfileScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Profile Screen</Text>
    </View>
  );
}

Configurar el Drawer Navigator:

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>
  );
}

Explicació del codi

NavigationContainer: És el contenidor principal per a la navegació. Totes les navegacions han d'estar dins d'aquest contenidor.
createDrawerNavigator: Crea un Drawer Navigator.
Drawer.Navigator: Defineix el Drawer Navigator i les seves pantalles.
Drawer.Screen: Defineix una pantalla dins del Drawer Navigator.

Personalització del Drawer Navigator

El Drawer Navigator es pot personalitzar de diverses maneres per adaptar-se a les necessitats de l'aplicació.

Personalitzar l'estil del Drawer

Podem personalitzar l'estil del Drawer Navigator utilitzant la propietat drawerStyle:

<Drawer.Navigator
  drawerStyle={{
    backgroundColor: '#c6cbef',
    width: 240,
  }}
>
  <Drawer.Screen name="Home" component={HomeScreen} />
  <Drawer.Screen name="Profile" component={ProfileScreen} />
</Drawer.Navigator>

Afegir un contingut personalitzat al Drawer

Podem afegir contingut personalitzat al Drawer utilitzant la propietat drawerContent:

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem
        label="Help"
        onPress={() => alert('Link to help')}
      />
    </DrawerContentScrollView>
  );
}

<Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />}>
  <Drawer.Screen name="Home" component={HomeScreen} />
  <Drawer.Screen name="Profile" component={ProfileScreen} />
</Drawer.Navigator>

Explicació del codi

DrawerContentScrollView: Un contenidor que permet desplaçar-se pel contingut del Drawer.
DrawerItemList: Mostra la llista d'ítems del Drawer.
DrawerItem: Afegeix un ítem personalitzat al Drawer.

Exercici pràctic

Objectiu

Crear una aplicació amb un Drawer Navigator que tingui tres pantalles: Home, Profile i Settings. Personalitzar el Drawer amb un color de fons i afegir un ítem personalitzat.

Solució

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { View, Text } from 'react-native';
import { DrawerContentScrollView, DrawerItemList, DrawerItem } from '@react-navigation/drawer';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

function ProfileScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Profile Screen</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings Screen</Text>
    </View>
  );
}

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem
        label="Help"
        onPress={() => alert('Link to help')}
      />
    </DrawerContentScrollView>
  );
}

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        drawerContent={props => <CustomDrawerContent {...props} />}
        drawerStyle={{
          backgroundColor: '#c6cbef',
          width: 240,
        }}
      >
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Profile" component={ProfileScreen} />
        <Drawer.Screen name="Settings" component={SettingsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Conclusió

En aquest tema, hem après a configurar i personalitzar el Drawer Navigator a React Native. Hem vist com afegir pantalles al Drawer, personalitzar el seu estil i afegir contingut personalitzat. Aquestes habilitats són essencials per crear aplicacions amb una navegació intuïtiva i fàcil d'usar. En el proper tema, explorarem com passar paràmetres a les rutes dins del nostre sistema de navegació.

Drawer Navigator

Objectius

Què és el Drawer Navigator?

Configuració del Drawer Navigator

Instal·lació de les dependències necessàries

Configuració bàsica

Explicació del codi

Personalització del Drawer Navigator

Personalitzar l'estil del Drawer

Afegir un contingut personalitzat al Drawer

Explicació del codi

Exercici pràctic

Objectiu

Solució

Conclusió

Curs de React Native

Mòdul 1: Introducció a React Native

Mòdul 2: Components bàsics i estilització

Mòdul 3: Estat i cicle de vida

Mòdul 4: Navegació

Mòdul 5: Xarxes i dades

Mòdul 6: Conceptes avançats

Mòdul 7: Desplegament i publicació

Mòdul 8: Projectes del món real