Meu Primeiro App com React Native - #06 Navegação entre Telas

Nesse tutorial iniciaremos a organização do nosso app em screens. Para isso, utilizaremos o módulo React Navigation.

Screens e navegação no React Native

Vamos iniciar instalando o módulo React Navigation e suas dependências:

npm install @react-navigation/native
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm install @react-navigation/stack

App.js

No nosso entry point (App.js) iremos chamar as screens:

import React, {useState,useEffect} from 'react';
import { Text, View, Button, Alert } from 'react-native';
import {css} from './assets/css/Css';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from './views/Home';
import Login from './views/Login';

export default function App() {

  const Stack = createStackNavigator();

  return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen name="Login" component={Login} />
        </Stack.Navigator>
      </NavigationContainer>
  );
}

Repare que no código acima nós importamos cada screen no top level do código.

views/Home.js

Criaremos a screen Home dentro do diretório views, seguindo assim o modelo MVC.

import React from 'react';
import {Text, View, Button} from 'react-native';

export default function Home({navigation}) {

    return (
        <View>
            <Text>Esse é o componente Home</Text>
            <Button
                    title='Ir para Login'
                    onPress={() => navigation.navigate('Login',{
                    id: 30
                })}
            />
        </View>
    );
}

No código anterior, repare que utilizamos um botão para direcionar o usuário para a screen de login passando o parâmetro id, utilizando para isso o objeto navigation.

views/Login.js

Criaremos também o componente Login para exemplificarmos a navegação entre as telas:

import React from 'react';
import { Text, View} from 'react-native';

export default function Login({route})
{
    return(
      <View>
          <Text>Esse é o componente Login do sistema {route.params.id}</Text>
      </View>
    );
}

No código acima resgatamos o parâmetro passado utilizando o objeto route.

Por hoje é só turma. Sucesso nos códigos e na vida!

Precisando de assessoria? webdesignemfoco@gmail.com