React Navigation: Dominando a Navegação Em APPs React Native

Neste artigo você vai aprender tudo sobre React Navigation e dominar a navegação de telas em aplicativos desenvolvidos com React Native.

Ter esse conhecimento é fundamental para você que deseja se tornar um desenvolvedor mobile profissional.

Além disso, deixei uma vídeo aula completa ensinando na prática como você utiliza essa biblioteca incrível para deixar seus APPs bem modernos.

Portanto, recomendo ler esse artigo até o final para entender cada detalhe e sair daqui realmente dominando essa biblioteca, vamos lá?

O que é React Navigation?

Primeiramente devemos entender o que é o React navigation, que nada mais é que uma biblioteca de navegação para aplicativos React Native, que permite criar a navegação entre as diferentes telas de um aplicativo.

Sendo assim, ele é amplamente utilizado pela comunidade React Native e fornece uma maneira fácil e flexível de gerenciar a navegação de maneira declarativa.

Através do React Navigation, é possível criar diferentes tipos de navegação, como empilhamento, guias e gavetas, além de personalizar as transições de navegação. Ele também suporta gestos de navegação, animações personalizadas e fornece uma API para gerenciar a pilha de navegação.

Além disso, ele foi criado para simplificar a implementação da navegação em aplicativos React Native e reduzir a complexidade da gestão de estados de navegação. Ele é altamente configurável e permite que os desenvolvedores personalizem a navegação para atender às necessidades de seus projetos.

Veja também: Review completo do melhor curso de criação de aplicativos nativos para android e iOS.

Como ele funciona?

O React Navigation é baseado em componentes React, que definem as diferentes telas e a navegação entre elas. Ele funciona criando uma “pilha” de telas, onde cada tela é empilhada em cima da outra, formando uma pilha de navegação.

Ou seja, quando um usuário navega para uma nova tela, a tela é empilhada na parte superior da pilha. Quando o usuário retorna à tela anterior, a tela superior é removida da pilha e a tela anterior é exibida.

Sendo assim, a navegação é gerenciada por meio da passagem de props entre os componentes de tela, que são usados para controlar o comportamento da navegação e atualizar a pilha de navegação.

Por exemplo, para empurrar uma nova tela na pilha de navegação, pode-se usar: “navigation.push(‘nomeDaTela’)”.

O React Navigation também fornece diferentes tipos de navegadores, como o Stack Navigator, Drawer Navigator e Tab Navigator, que permitem criar diferentes tipos de navegação em seu aplicativo.

Além disso, ele é altamente configurável e permite personalizar a navegação por meio da criação de animações personalizadas, gestos de navegação e personalização de transições entre as telas.

O que eu devo estudar antes de aprender React Navigation?

Antes de começar a aprender o React Navigation, é importante ter um conhecimento sólido do React e do React Native, já que essa biblioteca é baseada em componentes React e projetado especificamente para uso em aplicativos React Native.

Ou seja, você precisa desenvolver algumas habilidades como:

• JavaScript: o React e o React Native são baseados em JavaScript, portanto, é fundamental ter um conhecimento sólido de JavaScript, incluindo conceitos como variáveis, tipos de dados, funções, operadores e estruturas de controle de fluxo.
• React: você deve ter um conhecimento sólido do React e dos conceitos básicos, como componentes, props, estados e ciclo de vida do componente.
• React Native: é importante ter uma compreensão do React Native e sua estrutura de diretórios, bem como o desenvolvimento de aplicativos nativos para iOS e Android.
• Estilos e Layouts: conhecer bem o CSS e o Flexbox ajuda a entender o posicionamento de elementos na tela e a criação de layouts responsivos.

Enfim, com essas habilidades, você estará pronto para começar a criar a navegação do seu aplicativo React Native.

Veja também: Review completo do melhor curso de criação de aplicativos nativos para android e iOS.

Qual a diferença entre react native navigation e react navigation?

Outro ponto importante é saber a diferença entre React Native Navigation e React Navigation que são coisas diferentes e cada uma delas tem abordagens e recursos próprios.

A principal diferença entre elas é que o React Native Navigation é escrito em nativo, enquanto o React Navigation é escrito em JavaScript.

React Native Navigation

O React Native Navigation (também conhecido como Wix Navigation) é uma biblioteca de navegação escrita em código nativo para iOS e Android, o que significa que o desempenho e a experiência do usuário são excelentes.

Além disso, ele fornece uma API simples para criar transições suaves entre telas, além de suportar animações personalizadas e gestos de navegação.

React Navigation

Já o React Navigation é uma biblioteca de navegação escrita inteiramente em JavaScript, o que significa que é fácil de usar e rápido de implementar.

Ou seja, ele oferece suporte a diferentes tipos de navegação, como empilhamento, guias e gavetas, e também permite personalizar as transições de navegação.

Além disso, o ele tem uma ampla comunidade e uma documentação clara e completa.

Qual a importancia de aprender a usar o React Navigation?

O React Navigation é uma biblioteca essencial para o desenvolvimento de aplicativos móveis React Native, pois fornece uma maneira fácil e flexível de criar a navegação entre as telas do aplicativo.

Com essa biblioteca, é possível criar transições suaves entre as telas e gerenciar a pilha de navegação de forma eficiente.

Vou listar aqui para você algumas razões para você aprender React Navigation:

• Navegação avançada: Permite criar tipos de navegação avançados, como pilhas de navegação, guias de navegação e navegação por gestos.
• Experiência do usuário: É possível criar transições suaves e animações entre as telas, o que melhora a experiência do usuário e torna o aplicativo mais atraente.
• Gerenciamento de estado: Ele também fornece maneiras de gerenciar o estado do aplicativo ao navegar entre as telas, permitindo que você controle o comportamento do aplicativo em diferentes estados.
• Compatibilidade: Ele é compatível com diferentes plataformas, como iOS e Android, e é amplamente utilizado pela comunidade React Native.
• Documentação: Possui uma documentação completa e clara que facilita o aprendizado e o desenvolvimento de aplicativos.

Ou seja, aprender a usar o React Navigation é uma habilidade fundamental para desenvolvedores de aplicativos móveis React Native, e pode ajudá-los a criar aplicativos mais eficientes, atraentes e fáceis de usar.

Como é feito a link entre as telas pelo React Navigation?

A navegação entre as telas em um aplicativo React Native utilizando o React Navigation é feita através da chamada de funções específicas da biblioteca React Navigation, que manipulam a pilha de navegação para adicionar, remover ou alterar as telas.

Existem diversas funções que você pode utilizar, porem as mais comuns são:

• navigate: Adiciona uma nova tela à pilha de navegação e a exibe. Se a tela já estiver na pilha, ela será trazida à frente.
• push: Adiciona uma nova tela à pilha de navegação e a exibe. Diferente do navigate, mesmo que a tela já esteja na pilha, ela será adicionada novamente.
• goBack: Remove a tela atual da pilha de navegação e volta para a tela anterior.
• pop: Remove a tela atual da pilha de navegação e exibe a tela anterior.
• replace: Substitui a tela atual na pilha de navegação por uma nova tela.

Ou seja, para criar um link entre as telas, é necessário utilizar essas funções dentro de componentes React que representam elementos de navegação, como botões ou links.

Por exemplo, um botão que leva o usuário para uma nova tela pode ser implementado com o seguinte código:

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

function MyScreen() {
  const navigation = useNavigation();

  return (
    <Button
      title="Go to Next Screen"
      onPress={() => navigation.navigate('NextScreen')}
    />
  );
}

No exemplo acima. o useNavigation é um hook fornecido pelo React Navigation que permite acessar a função navigate para adicionar a próxima tela à pilha de navegação e exibi-la.

Ou seja, o argumento 'NextScreen' é o nome da tela que será exibida após a navegação.

Como é feito o envio de dados de uma tela para outra com o React Navigation?

Essa biblioteca incrível fornece uma maneira simples e eficiente de enviar dados de uma tela para outra através do uso de parâmetros de navegação.

Além disso, esses parâmetros são um objeto que pode ser passado para a função de navegação, que, por sua vez, os envia para a próxima tela.

Ou seja, para enviar dados de uma tela para outra, primeiro é preciso definir os parâmetros na tela de origem. Isso pode ser feito passando um objeto com os parâmetros para a função de navegação:

navigation.navigate('NextScreen', { param1: 'foo', param2: 'bar' });

No exemplo acima, estamos passando dois parâmetros, param1 e param2, com os valores 'foo' e 'bar', respectivamente.

Em seguida, na tela de destino, podemos acessar esses parâmetros através do objeto route.params:

function NextScreen({ route }) {
  const { param1, param2 } = route.params;

  return (
    <View>
      <Text>Param1: {param1}</Text>
      <Text>Param2: {param2}</Text>
    </View>
  );
}

Aqui, estamos acessando os parâmetros param1 e param2 do objeto route.params, que contém todos os parâmetros enviados da tela anterior.

Sendo assim, esses valores podem ser exibidos na tela usando componentes React como Text ou View.

Lembre-se de que, ao usar parâmetros de navegação, é importante garantir que os nomes dos parâmetros correspondam em ambas as telas.

Vídeo Aula

Por fim, para te ajudar a visualizar de uma maneira mais prática como o funcionamento do React Navigation, vou deixar aqui embaixo um vídeo completo do Sujeito Programador.

Nesse vídeo você vai aprender a criar uma tab bar personalizada utilizando o React Navigation.

Clique aqui para baixar o projeto inicial da vídeo aula.

Se você deseja aprender a desenvolver qualquer tipo de aplicativo nativo para Android ou iOS conheça o curso completo do Sujeito Programador. Clique no botão abaixo e faça a sua inscrição:

ACESSAR CURSO COMPLETO

Conclusão

Em conclusão, para quem está iniciando os estudos sobre React Navigation, é importante entender que essa biblioteca é responsável por gerenciar a navegação entre as diferentes telas de um aplicativo React Native.

Ou seja, alguns conceitos importantes para estudar antes de começar a aprender o React Navigation incluem JavaScript, React, React Native, estilos e layouts.

E caso você queira aprender a criar aplicativos do zero através de uma metodologia de ensino exclusiva e focada na prática e mercado de trabalho recomendo clicar no botão abaixo:

ACESSAR CURSO COMPLETO

Enfim, espero que tenha gostado desse conteúdo e que ele tenha te ajudado de alguma forma.

Um forte abraço!

Leia também:

• Curso Fábrica de Aplicativos do Sujeito Programador Vale a Pena?
• Os Melhores Modelos de Notebooks Para Programar Neste Ano!
• 5 Livros Para Desenvolvedores Front-End Iniciantes

Tags: react native navigation | react navigation | tab bar react native