Repositório para estudo das propriedades do menu drawer do react navigation, mais especificamente voltado para a criação de um componente personalizado a partir da propriedade drawerContent
do Drawer.Navigator permitindo assim substituir o componente nativo.
Modificações que você verá neste projeto:
-
Ícones: O componente
DrawerItem
na propriedadelabel
permite carregar uma função que retorna um elemento react, desta maneira, pode-se carregar um ícone nos itens do menu. -
Orientações dos elementos: No elemento nativo você não conseguiria alinhar os itens na vertical ou colocar itens com posições absolutas.
-
Evento do item: No componente
DrawerItem
também existe a propriedadeonPress
sendo possível executar uma função ao pressionar o item, pois no menu normal só era permitido links para as rotas do drawer.
Nota: Ao optar em usar a propriedade drawerContent
todas as Screens não serão listadas, por isso deve ser importado o componente DrawerItemList para que o menu as reconheça.
Faça um clone desse repositório e acesse o diretório.
$ git clone [email protected]:LeeonardoVargas/example-drawer.git && cd example-drawer
Agora basta instalar as dependências e executar o expo. Caso você não tenha o expo-cli instalado basta seguir esse tutorial.
# Instalando as dependências
$ yarn
# Executanto aplicação
$ expo start