Curso de React Native - Curso de React Native #19: Drawer Navigation

Aprenda a programar - Confira em: https://hotm.art/pacote-aprenda-a-programar Neste vídeo você vai aprender como usar Drawer Navigation. Para trabalhar com Drawer Navigation basta usar a biblioteca react-navigation. Drawer Navigation é um componente muito popular no desenvolvimento de aplicativos em React Native. Ele permite gerenciar o número de opções do aplicativo de uma maneira muito fácil. Um usuário pode navegar de uma tela para outra com muita facilidade simplesmente puxando o menu lateral. Esta é a décima nona parte do curso de React Native gratuito, que busca ser completo para que você possa entender como criar aplicativos para android e ios utilizando código javascript e react. Um abraço, Developer Plus ======================================================= OBSERVAÇÃO: Na versão 4.0 do React Navigation, os navegadores foram movidos para diferentes repositórios. Para funcionar na versão atual, você precisa incluir no seu projeto alguns pacotes adicionais. Para fazer isso, na pasta do seu projeto, execute os comandos abaixo: npm install react-navigation-drawer --save npm install react-native-reanimated --save Após instalar, para importar no código, ao invés de fazer assim: import { createAppContainer, createDrawerNavigator } from 'react-navigation'; Faça assim: import { createAppContainer } from 'react-navigation'; import {createDrawerNavigator} from 'react-navigation-drawer'; Segue abaixo link com o código: https://snack.expo.io/@developerplus/drawer-navigation ======================================================= 1. Configurar biblioteca --------------------------------- npm install react-navigation --save npm install react-native-gesture-handler --save npm install react-navigation-drawer --save npm install react-native-reanimated --save react-native link react-native-gesture-handler Observação: A partir da versão 0.60 do React Native, não é preciso fazer link, o link é automático. 2. Editar arquivo MainActivity.java ---------------------------------------- import com.facebook.react.ReactActivityDelegate; import com.facebook.react.ReactRootView; import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView; @Override   protected ReactActivityDelegate createReactActivityDelegate() {     return new ReactActivityDelegate(this, getMainComponentName()) {       @Override       protected ReactRootView createRootView() {        return new RNGestureHandlerEnabledRootView(MainActivity.this);       }     };   } Observação: A partir da versão 5.0 do React Navigation, não é mais preciso editar o arquivo MainActivity. 3. SDK Tools Atualizado -------------------------------------