Navegação

React Native Navigation (também conhecido como React Navigation) é uma biblioteca popular para gerenciar a navegação em aplicativos React Native. Ele permite criar navegação intuitiva e fluente em seu aplicativo, incluindo pilhas de navegação, abas e gavetas (drawers). Vou explicar como configurar a navegação básica usando o React Navigation.

Instalação:

Antes de começar, você precisa instalar a biblioteca React Navigation em seu projeto. Você pode fazer isso usando o npm ou o yarn:

# Usando npm
npm install @react-navigation/native

# Usando yarn
yarn add @react-navigation/native

Após instalar a biblioteca principal, você precisa instalar as dependências específicas para o tipo de navegação que deseja usar. Por exemplo, se você deseja usar a navegação em pilhas (stack navigation), você precisa instalar a seguinte dependência:

# Usando npm
npm install @react-navigation/stack

# Usando yarn
yarn add @react-navigation/stack

Aqui está um exemplo básico de como configurar a navegação em pilhas usando o React Navigation:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import TelaInicial from './TelaInicial';
import TelaDetalhes from './TelaDetalhes';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="TelaInicial">
        <Stack.Screen name="TelaInicial" component={TelaInicial} />
        <Stack.Screen name="TelaDetalhes" component={TelaDetalhes} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Neste exemplo, NavigationContainer é o contêiner principal para a navegação, e createStackNavigator é usado para criar uma pilha de navegação. Stack.Screen é usado para definir as diferentes telas da aplicação.

Navegando entre Telas:

Para navegar entre telas, você pode usar o hook useNavigation ou a propriedade navigation nos componentes de tela. Por exemplo:

import React from 'react';
import { View, Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const TelaInicial = () => {
  const navigation = useNavigation();

  const irParaDetalhes = () => {
    navigation.navigate('TelaDetalhes');
  };

  return (
    <View>
      <Button title="Ir para Detalhes" onPress={irParaDetalhes} />
    </View>
  );
};

export default TelaInicial;

Neste exemplo, useNavigation é usado para obter o objeto de navegação, e navigation.navigate é usado para navegar para a tela de detalhes quando o botão é pressionado.

Este é um exemplo básico de como configurar a navegação em pilhas usando o React Navigation em um aplicativo React Native. A biblioteca oferece muitas opções para personalizar a navegação de acordo com as necessidades do seu aplicativo, incluindo navegação em abas, gavetas e muito mais. Recomendo consultar a documentação oficial do React Navigation para obter mais informações sobre as opções disponíveis: React Navigation Documentation.

Instalação:

Configuração Básica da Navegação em Pilhas (Stack Navigation):

Navegando entre Telas: