Curso de React Native - Curso de React Native #14: Navegação entre Telas (Parâmetros)

Aprenda a programar - Confira em: https://hotm.art/pacote-aprenda-a-programar Neste vídeo você vai aprender como passar parâmetros entre telas e mudar o estilo da barra de navegação. Além de saber como criar rotas e navegar entre elas, é preciso saber como transmitir dados às rotas quando navegamos até elas. A função navigate aceita um segundo argumento opcional para permitir passar parâmetros para a rota para a qual se está navegando. Por exemplo: this.props.navigation.navigate('RouteName', {paramName: 'value'}). Você pode ler os parâmetros através de: this.props.navigation.getParam Definindo o título da barra de navegação Um componente de tela pode ter uma propriedade estática chamada navigationOptions, que é um objeto ou uma função que retorna um objeto que contém várias opções de configuração. O que usamos para o título do cabeçalho é a opção title. Ajustando estilos da barra de navegação Existem três propriedades principais a serem usadas ao personalizar o estilo do seu cabeçalho: headerStyle, headerTintColor, and headerTitleStyle. Você vai aprender com um exemplo prático, fácil de entender, para que você possa absorver o conceito. Esta é a décima quarta 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-(parametros) ======================================================= 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 -------------------------------------