Curso de React Native - Curso de React Native #13: Navegação entre Telas

Aprenda a programar - Confira em: https://hotm.art/pacote-aprenda-a-programar Neste vídeo você vai aprender como navegar entre telas usando a biblioteca react navigation. Os aplicativos para dispositivos móveis raramente são compostos por uma única tela. O gerenciamento da apresentação e da transição entre várias telas é normalmente tratado pelo que é conhecido como navegador. Se você está apenas começando a usar navegação, provavelmente vai querer usar o React Navigation. O React Navigation oferece uma solução de navegação fácil de usar, com a capacidade de apresentar uma pilha padrão de navegação e navegação com guias no iOS e no Android. Você vai aprender com um exemplo prático, fácil de entender, para que você possa absorver o conceito. Esta é a décima terceira 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. ======================================================= OBSERVAÇÃO: Na versão 4.0 do React Navigation, os navegadores foram movidos para diferentes repositórios. Então, para usar o 'createStackNavigator', é preciso instalar o pacote correspondente com o comando abaixo: npm install react-navigation-stack Após instalar, para importar no código, ao invés de fazer assim: import { createAppContainer, createStackNavigator } from 'react-navigation'; Faça assim: import { createAppContainer } from 'react-navigation'; import { createStackNavigator } from 'react-navigation-stack'; Segue abaixo link com o código: https://snack.expo.io/@developerplus/navegacao-entre-telas ======================================================= 1. Configurar biblioteca --------------------------------- npm install --save react-navigation npm install --save react-navigation-stack npm install --save react-native-gesture-handler 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 -------------------------------------