React Native: Stack Navigation

Quando um aplicativo possui mais de uma tela é necessário que o usuário possa mudar de uma tela para outra. Para isso a navegação é necessária.

Instalar bibliotecas, definir que o app terá navegação e definir as rotas são os passos que vamos codificar para que o usuário consiga acessar as telas do aplicativo.

Através do componente NavigationContainer definimos que o aplicativo vai ter navegação. Dentro dele inserimos o tipo de navegação do nosso aplicativo e suas rotas.

Existem diferentes tipos de navegação que um aplicativo pode ter. Ele pode ser uma barra de título, uma barra com abas ou um menu arrastável da esquerda para direita.

Uma das formas de navegação é o createStackNavigator. Existem algumas configurações que podemos fazer para personalizar a barra de título que ele nos disponibiliza por padrão.

Conhecer a estrutura do nosso projeto bem como as telas do nosso aplicativo, a divisão de arquivos e pastas e a forma como os componentes serão divididos é o assunto desta aula.

Está quase na hora de colocar a mão na massa mas antes vamos baixar e conhecer o projeto base que será usado neste curso.

A biblioteca react-navigation nos permite criar de forma nativa a navegação do aplicativo. Para cuidar do código nativo ela conta com algumas outras bibliotecas que vemos nesta aula.

No componente App vamos definir que nosso aplicativo terá navegação. Além disso vamos definir nele o tipo de navegação e as rotas da aplicação.

Com as rotas criadas precisamos agora avisar para o React Native quando queremos abrir uma nova tela. Para isso é necessário chamar o método navigate que veremos nesta aula.