Navegação em React Native

Existem diversos tipos de navegação entre telas usando React Native,

cada um possui um objetivo e um tipo de implementação diferente.

Tudo depende da complexidade e da usuabilidade que será o app.

import  React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

// createNativeStackNavigator retorna dois componentes do React
// Screen e Navigator
const Stack = createNativeStackNavigator();

const MyStack = () => {
  return (
    // Responsável por gerenciar o estado do app
    <NavigationContainer>
      
      {/* StackNavigator é uma maneira de transitar entre as telas */}
      <Stack.Navigator>

        {/* É a tela que vai ser renderizada para o usuário */}
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{ title: 'Welcome' }}
        />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default MyStack;

Outro exemplo prático de navegação

import { createStackNavigator } from '@react-navigation/stack';

//Colocamos dentro de uma const para o nome não ficar grande demais
const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Notifications" component={Notifications} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

Navegação por Tabs

• createMaterialBottomTabNavigator → Onde vai ser criado uma navegação em tabs embaixo da tela, como por exemplo, o instagram.
• createMaterialTopTabNavigator → Criação de tabs em cima do aplicativo para ter a navegação por tabs

import React from 'react';

import { NavigationContainer } from '@react-navigation/native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'

const Tab = createBottomTabNavigator();

export default function NavigationTab() {
  
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="Home" component={About} />
      </Tab.Navigator>
    </NavigationContainer>

  );
}

PS: Eu posso mesclar quantos tipo de navegação

eu quiser, por exemplo, tenho uma bottomTab e quando clico na tela sobre, existir um buttom com navegação em stack que me leve para a tela de contato.

DrawerNavigator

Adiciona um Sidebar na lateral do aplicativo, o que é um excelente componente quando se tem um grande número de rotas visíveis ao usuário.

import React from 'react';
import { NavigatorContainer } from '@react-navigation/native'
import { createDrawerNavigator } from '@react-navigation/drawer'

const Drawer = createDrawerNavigator();

export default function DrawerNavigation() {
  return (
    <NavigatorContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={Home} />
        <Drawer.Screen name="About" component={About} />
        <Drawer.Screen name="Contato" component={Contato} />
      </Drawer.Navigator>
    </NavigatorContainer>
  );
}

Router Flux