Como utilizar o Componente NavigationContainer

O NavigationContainer e o Stack.Navigator são partes essenciais da navegação em React Native, ajudando a organizar a navegação entre telas (ou “páginas”) de um aplicativo. Vou explicar detalhadamente como cada um deles funciona e qual é a sua utilidade, usando exemplos simples.

O que é Navegação em React Native?

Quando você cria um aplicativo com várias telas, precisa de uma maneira para que os usuários se movimentem entre elas. No React Native, a biblioteca mais popular para navegação é a React Navigation. O NavigationContainer e o Stack.Navigator são os blocos de construção dessa navegação.

NavigationContainer

O NavigationContainer é como o “gerente” de navegação. Ele mantém o controle de todas as telas que o seu aplicativo tem, rastreando para onde o usuário está indo, qual tela ele está vendo e como ele pode voltar. É o “cérebro” do sistema de navegação.

Exemplo:

Imagine que você tem duas telas no seu aplicativo: uma página de “Home” e uma página de “Detalhes”. O NavigationContainer vai garantir que o usuário possa ir da tela “Home” para a tela “Detalhes” e vice-versa.

Stack.Navigator

O Stack.Navigator é um tipo específico de “navegação” que organiza suas telas em forma de “pilha” (daí o nome “Stack”). Isso significa que, quando você navega de uma tela para outra, a nova tela é “empilhada” sobre a anterior, e o usuário pode voltar para a tela anterior (como se estivesse empilhando cartas e retirando-as uma por uma).

Exemplo:

Se o usuário está na tela “Home” e vai para a tela “Detalhes”, ele empilha a tela “Detalhes” sobre a tela “Home”. Quando ele clica no botão “voltar”, a tela “Detalhes” é removida da pilha e ele volta para a tela “Home”.

Passo a Passo com Exemplos

Passo 1: Instalar React Navigation

Primeiro, você precisa instalar a biblioteca React Navigation no seu projeto.

npm install @react-navigation/native
npm install @react-navigation/stack
expo install react-native-screens react-native-safe-area-context

Passo 2: Estrutura Básica do Projeto

Agora, aqui está um exemplo de como usar o NavigationContainer e o Stack.Navigator para criar uma navegação entre duas telas: “Home” e “Detalhes”.

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

// Criamos uma "Stack" de navegação
const Stack = createStackNavigator();

// Definimos a tela "Home"
function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Página Inicial (Home)</Text>
      <Button
        title="Ir para Detalhes"
        onPress={() => navigation.navigate('Detalhes')}
      />
    </View>
  );
}

// Definimos a tela "Detalhes"
function DetailsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Página de Detalhes</Text>
    </View>
  );
}

// Aplicativo principal com a navegação
export default function App() {
  return (
    // NavigationContainer gerencia a navegação
    <NavigationContainer>
      {/* Stack Navigator organiza as telas */}
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detalhes" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Explicação do Exemplo:

1. NavigationContainer:

• Esse componente envolve toda a aplicação. Ele funciona como o “gerente” que mantém a navegação em funcionamento.

1. Stack.Navigator:

• Aqui estamos usando o Stack.Navigator para organizar nossas telas. Ele cria a estrutura de pilha, onde as telas são empilhadas umas sobre as outras.

1. Stack.Screen:

• Cada tela do aplicativo é definida por um Stack.Screen. Aqui temos duas telas: uma chamada “Home” e outra chamada “Detalhes”. Cada uma delas é conectada a um componente de tela.

1. navigation.navigate:

• Na tela “Home”, usamos o navigation.navigate('Detalhes') para enviar o usuário para a tela “Detalhes”. O React Navigation cuida do resto.

1. Botão Voltar:

• Quando o usuário vai para a tela “Detalhes”, ele pode clicar no botão de voltar (que é adicionado automaticamente) para retornar à tela “Home”. Isso acontece porque estamos usando a navegação em pilha (Stack).

Benefícios de Usar o NavigationContainer e o Stack.Navigator:

• Organização: O Stack.Navigator permite organizar as telas em uma ordem lógica, com fácil controle de para onde o usuário pode ir e de onde ele vem.
• Botão Voltar Automático: Em muitas plataformas (como Android), o React Navigation adiciona automaticamente um botão “voltar” na interface, então você não precisa codificar isso manualmente.
• Simples e Intuitivo: Navegar entre telas com o Stack.Navigator é muito simples e fácil de entender, tanto para iniciantes quanto para desenvolvedores mais experientes.

• O NavigationContainer é o componente principal que mantém o controle de toda a navegação no seu aplicativo.
• O Stack.Navigator permite empilhar telas e navegar entre elas de uma forma natural, como se estivesse empilhando cartas e depois removendo-as uma a uma.
• Com React Navigation, você pode criar uma experiência de navegação fluida e simples para os usuários, mesmo com várias telas.