Navegação entre telas, com React Navigation

Como desenvolvedores dificilmente iremos trabalhar com apenas 1 página em nossa aplicação,seja web ou mobile. Devemos ter acesso a outras telas reservadas a diferentes áreas de nossa aplicação. Mas diferente das versões Web, o raciocínio para fazer uma chamada de uma nova tela e uma navegação entre elas é bem diferente. Neste artigo iremos iremos ver as diferenças e como criar uma simples aplicação que fará a navegação entre telas no React Native.

Instalando o React Navigation -

Para começar, precisamos instalar o React Navigation. Podemos fazer isso usando o gerenciador de pacotes npm. Abra o terminal e digite o seguinte comando:

npm install @react-navigation/native
yarn add @react-navigation/native

Isso instalará o pacote @react-navigation/native e todas as suas dependências.

Também devemos instalar as dependências do expo, visto que nossa aplicação exemplar rodará nele:

npx expo install react-native-screens react-native-safe-area-context

E por último instalar as biblioteca de conexão de pilhas(stack)de navegação. O StackNavigator é usado para empilhar telas em cima umas das outras, permitindo que o usuário navegue para frente e para trás na pilha de telas.

npm install @react-navigation/native-stack

Configurando o React Navigation -

Vamos começar criando uma tela. Devemos colocar nosso código no arquivo do projeto, que tem como nome App.js (ou App.tsx, caso utilize typeScript):

// Em app.js um novo projeto

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

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

export default App;

No código acima, será retornada ao executar o projeto em expo, com os seguintes comandoa: npx expo start a seguinte tela:

Criamos uma função que irá retornar a primeira tela, a chamamos de HomeScreen, sem nenhum parâmetro aplicado ainda. Nela fazemos o retorno de uma Viewe Textque tinham sido importados ao início do código.

Também criamos ali a variável
const Stack = createNativeStackNavigator();, que é onde guardaremos as nossas telas que serão adicionadas.

Feito isso, chegamos até a função App, que carrega todo o arquivo da aplicação. É nele(que seria a tela principal que irá gerenciar tudo) que iremos deixar a primeira tela e por meio da const Stack importada, alterar as telas.

Quando começamos a retornar a função completa, temos o NavigationContainerque está armazenando tudo, englobando as telas, e dentro dele o Stack.Navigator,e depois o Stack.screen que guardará as telas.

Depois nós adicionamos mais um Stack.screen que podemos dar o nome de "Details". Após isso concluímos nosso raciocínio(use como base o código feito acima da function HomeScreen pra criar uma nova tela, com o nome DetailsScreen)

Navegando entre as telas,finalmente -

Algo a se lembrar e até por em mesa é as difereça existente entre navegação de telas na web e no mobile.

Se fosse um navegador da Web, poderíamos escrever algo assim:

<a href="details.html">Go to Details</a>

No caso do Mobile, será um pouco diferente, por exemplo:

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

// ... continuação do código anterior mas com a alteração feita acima

No caso acima, por meio de um Button(lembre-se de importá-lo), nós demos o nome ou título deste botão e ao pressionar com o caminho navigation.navigate('Details'), ele irá navegar para a função criada anteriormente DetailScreen, que está sendo pego seu componente.

Com isso conseguimos criar um botão que nos leva até outras telas, por meio de clik. E o bom de criar uma navegação por meio do React Navigation é que seu modo de navegar é fácil de aprender, além de seu botão de retorno que é feito automáticamente para a segunda tela chamada.

Algo a se alertar: Caso esteja escrevendo seu código utilizando TypeScript, siga a regra de tipagem pré determinada. Ela está no link abaixo, pois só por meio de tipagem será possível a execução do código.

https://reactnavigation.org/docs/typescript/#type-checking-screens

A solução encontrada em meu projeto pessoal foi adicionar que as tipagens das minhas funções em tela eram nulas em seu parâmetro:

import { NavigationProp } from '@react-navigation/native';

//...... dentro da função, em seu parâmetro, inserir:
function HomeScreen({ navigation }: { navigation: NavigationProp<any> }) 

Por meio do React Navigation, nós conseguimos criar um ambiente de navegação que possibilita o crescimento de nossa aplicação e consegue passar maior profissionalismo em sua sistema,além das outras formas de navegação que são possíveis, como a navegação por Stack vista nesse artigo, como a por meio de Drawer,Bottom table(utilizado muito em aplicativos para iOS, com uma barra de navegação abaixo).