Drawer

Drawer Navigation, também conhecida como gaveta de navegação, é um padrão de navegação comumente usado em aplicativos móveis para exibir menus e opções de navegação lateralmente. Com o React Navigation, você pode implementar uma Drawer Navigation de forma simples e eficaz em seu aplicativo React Native.

Aqui está um exemplo básico de como configurar uma Drawer Navigation usando o React Navigation:

Instalação:

Certifique-se de ter instalado a biblioteca do React Navigation e a dependência para a Drawer Navigation:

# Usando npm
npm install @react-navigation/native @react-navigation/drawer

# Usando yarn
yarn add @react-navigation/native @react-navigation/drawer

Configuração da Drawer Navigation:

import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import TelaPrincipal from './TelaPrincipal';
import TelaConfiguracoes from './TelaConfiguracoes';

const Drawer = createDrawerNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="TelaPrincipal">
        <Drawer.Screen name="TelaPrincipal" component={TelaPrincipal} />
        <Drawer.Screen name="TelaConfiguracoes" component={TelaConfiguracoes} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

export default App;

Neste exemplo, createDrawerNavigator é usado para criar a Drawer Navigation. Você define as diferentes telas usando Drawer.Screen dentro do componente Drawer.Navigator.

Navegando entre Telas:

Para abrir a gaveta de navegação a partir de um botão ou outro componente, você pode usar o hook useNavigation ou a propriedade navigation:

import React from 'react';
import { View, Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const TelaPrincipal = () => {
  const navigation = useNavigation();

  const abrirGaveta = () => {
    navigation.openDrawer();
  };

  return (
    <View>
      <Button title="Abrir Gaveta" onPress={abrirGaveta} />
    </View>
  );
};

export default TelaPrincipal;

Neste exemplo, navigation.openDrawer() é usado para abrir a gaveta de navegação quando o botão é pressionado.

Lembre-se de que você pode personalizar ainda mais a Drawer Navigation, como adicionar ícones aos itens do menu, personalizar a aparência da gaveta e definir comportamentos específicos para diferentes telas. Para obter mais detalhes sobre as opções disponíveis, consulte a documentação oficial do React Navigation: React Navigation Drawer Navigation.