Como navegar entre telas em um aplicativo React Native

Muitas vezes, ao criar um aplicativo React Native, você o compõe a partir de telas diferentes, como Login, Home e About. Você precisará implementar um mecanismo de navegação para que seus usuários possam navegar no aplicativo e acessar suas telas individuais na ordem correta.

O objetivo deste tutorial é orientá-lo no processo de configuração de um sistema de navegação em seu aplicativo React Native. Isso inclui instalar a biblioteca, adicionar suas telas ao navegador de pilha e conectar as telas de dentro de cada um de seus componentes.

Antes de você começar

Para seguir este tutorial em seu computador local, você precisa ter o seguinte instalado:

• Node.js v10 ou superior
• código X ou Estúdio Android (configurado para rodar o emulador)
• Reagir CLI nativa

Para obter instruções passo a passo sobre como configurar seu ambiente de desenvolvimento React Native, você pode ler o React Native oficial documentação de configuração.

Antes de começar a ver como implementar a navegação em nosso aplicativo React Native, vamos entender como o mecanismo de navegação de pilha funciona no React Native.

Entendendo como funciona a navegação na pilha

Imagine que seu aplicativo React Native é uma pilha. Inicialmente, nessa pilha, você tem Lar, que é a primeira tela que aparece quando você abre o aplicativo.

Se você fosse navegar para o Sobre tela do Lar tela, o aplicativo empurraria Sobre na pilha, de modo que fique no topo Lar. Da mesma forma, o aplicativo coloca cada nova tela em que você navega na pilha.

Agora, se você quiser voltar para a tela anterior, o aplicativo abre a tela atual da pilha e mostra a tela abaixo dela. Esse comportamento é semelhante ao que acontece quando você clica no ícone "voltar" em seu navegador da web.

Com uma compreensão clara do mecanismo de navegação de pilha, agora é hora de configurá-lo em um aplicativo React Native.

1. Instale o React Navigation para aplicativos nativos

Para começar, instale o Reagir pacote de navegação para aplicativos nativos em seu projeto React Native executando este comando em um terminal:

npm eu @reagir-navegação/nativo

O pacote que você acabou de instalar requer Reagir Pilha Nativa e Reagir a telas nativas para executar corretamente. Para instalar o RN Stack, execute:

npm eu @reagir-navegação/nativo-pilha

Para instalar o segundo, execute isto:

npm eu reajo-nativo-telas

Agora você tem tudo o que precisa para começar a criar o mecanismo de navegação em seu aplicativo. O próximo passo é configurar as telas.

2. Configure a tela em seu aplicativo React Native

Para este exemplo, criaremos apenas duas telas — a tela inicial e a tela sobre.

Crie uma pasta chamada telas dentro do diretório raiz do seu aplicativo. Depois, crie dois arquivos chamados HomeScreen.js e AboutScreen.js dentro do diretório telas.

O que adicionar ao seu arquivo HomeScreen.js

Abra o arquivo HomeScreen.js e comece importando o seguinte:

importar * como Reagir de'reagir';
importar { Text, View, StyleSheet, TouchableOpacity } de'reagir nativo';
importar { useState } de'reagir'

Em seguida, crie o componente funcional HomeScreen e acesse o objeto de navegação usando a desconstrução do objeto (conforme Práticas recomendadas de reação), em seguida, retorne um título e um botão para navegar até a tela sobre:

exportarpadrãofunçãoTela inicial({navegação}) { 
retornar ( 
<Visualizarestilo={estilos.container}>
<Textoestilo={estilos.paragrafo}> Tela inicial Texto>
 titulo="Ir para Sobre"
 onPress={() => navigation.navigate('Sobre a tela')} 
 /> 
Visualizar>
 );
}

Aqui estamos dizendo ao React Native para navegar para Sobre quando um usuário pressiona o botão. Nesse caso, não estamos passando nenhum dado para a tela. Mas suponha que você queira passar dados para a função; aqui está como você faria isso:

exportarpadrãofunçãoTela inicial({navegação}) { 
const dados = { Nome do site: "Tecnologia do John" }
retornar ( 
<Visualizarestilo={estilos.container}>
// O texto vai aqui 
 titulo="Ir para Sobre"
 onPress={() => navigation.navigate('Sobre a tela', dados)} 
 /> 
Visualizar>
 );
}

Agora quando você aperta o botão, esse código passa os dados para a próxima tela, Sobre. Dentro de AboutScreen.js arquivo, você pode acessar os dados da rota e exibi-los na interface do usuário.

O que adicionar ao seu arquivo AboutScreen.js

Abra o arquivo AboutScreen.js e comece importando as seguintes dependências:

importar * como Reagir de'reagir';
importar { Texto, Visualização, Folha de estilo, Botão } de'reagir nativo';

A seguir, crie o SobreTela componente funcional que recebe dados do rota.params propriedade e retorna os dados na interface do usuário:

exportarpadrãofunçãoSobreTela({rota}) { 
deixar dataObj = rota.params
retornar ( 
<Visualizarestilo={estilos.container}>
<Textoestilo={estilos.paragrafo}>
 Esse é a tela Sobre de {dataObj.websiteName} 
Texto>
Visualizar>
 );
}

Se você se lembra, especificamos uma única propriedade no objeto de dados chamado Nome do site, que agora renderizamos dentro do componente. Você pode adicionar quantas propriedades quiser no objeto e acessá-las dentro do componente de telas de destino.

A próxima etapa é configurar nosso navegador de pilha com as duas telas.

3. Conectando as Telas com o Stack Navigator

Dentro do App.js, comece importando as seguintes dependências:

importar * como Reagir de'reagir';
importar Tela inicial de'./screens/HomeScreen'
importar SobreTela de'./screens/SobreTela'
importar { NavigationContainer } de"@react-navigation/native"
importar { createNativeStackNavigator } de"@react-navigation/native-stack"

Nas linhas dois e três, importamos as duas telas que acabamos de criar. Em seguida, importamos NavigationContainer

de @react-navigation/native e createNativeStackNavigator de @react-navigation/native-stack para nos ajudar a conectar as telas.

Em seguida, ligue createNativeStackNavigator para recuperar a pilha:

const Pilha = createNativeStackNavigator()

Isso nos permite “empilhar” as telas entre as quais você deseja fazer a transição em seu aplicativo.

Crie a função do componente App e retorne ambas as telas no como mostrado abaixo. Certifique-se de embrulhá-lo no ou não vai funcionar:

exportarpadrãofunçãoAplicativo() { 
retornar ( 
<NavigationContainer>
<Pilha. Navegador>
<Pilha. Telanome="Tela inicial"componente = {Tela inicial} />
<Pilha. Telanome="Sobre a tela"componente = {Sobre a tela} />
Pilha. Navegador>
NavigationContainer>
 );
}

Esse código coloca a tela HomeScreen no topo da pilha, o que significa que o aplicativo primeiro renderizará o componente Home quando terminar de carregar.

Agora está tudo definido. Você pode testar o aplicativo clicando no Ir para Sobre botão na interface do usuário inicial. Isso deve redirecioná-lo para Sobre, e você encontrará o Nome do site propriedade exibida na IU:

A melhor coisa sobre o uso do React Navigation for Native é que é muito fácil de configurar e usar. Não requer nenhuma configuração extra (além das bibliotecas necessárias que você instalou) e você também pode conectar diferentes tipos de Paywall (se você pretende criar um aplicativo baseado em assinatura).

Saiba mais sobre o React Native

React Native é uma estrutura de plataforma cruzada para criar aplicativos executados em dispositivos Android e iOS. Há muito o que aprender sobre o React Native e, se você é novo no uso da estrutura, deve começar aprendendo o básico.