Este tutorial do React Native Navigation foi atualizado pela última vez em 1º de dezembro de 2022 e contém informações sobre a versão mais recente do React Navigation (v6 no momento da escrita), bem como uma seção comparando o React Navigation com a biblioteca React Router. Confira React Navigation vs React Native Navigation: Qual é o certo para você? para saber mais informações.
Os aplicativos móveis consistem em várias telas. Ao construir um aplicativo móvel, uma grande preocupação é como lidar com a navegação do usuário dentro do aplicativo, como a apresentação de telas e transições entre telas.
React Navigation é uma das bibliotecas de navegação mais conhecidas para React. Neste tutorial, abordaremos os fundamentos da navegação React Native, mostraremos como começar a usar o React Navigation em um aplicativo React Native e percorreremos alguns exemplos de navegação React Native.
O que é navegação reativa?
React Navigation é uma biblioteca independente e 8 maneiras de corrigir problema de tela preta do Windows 11 permite implementar funcionalidade de navegação em aplicativos React Native.
React Navigation é escrito em JavaScript e não usa diretamente a API de navegação nativa no iOS e Android. Em vez disso, recria algum subconjunto dessas APIs. Isso permite que plug-ins JS de terceiros sejam integrados para personalização máxima e depuração mais fácil, sem a necessidade de aprender Objective-C, Swift, Java, Kotlin, etc.
Reagir Navegação 6.0
No momento em que este artigo foi escrito, a versão mais estável do React Navigation era o React Navigation 6.0, lançado em agosto de 2021. De acordo com o post de lançamento, a versão mais recente concentra-se na flexibilidade e facilidade de uso. No entanto, a equipe também disse que esta versão mais recente traz poucas mudanças importantes.
Alguns dos novos recursos incluídos no React Navigation 6.0 incluem:
-
Opções flexíveis de personalização para o Navigator: Isso significa que os desenvolvedores agora podem ajustar ainda mais a aparência do Navigator
-
Componente Grupo: O elemento Grupo permite aos usuários compartilhar opções e configurações de tela entre telas em um projeto. Portanto, isso permite mais organização e legibilidade do código
-
Biblioteca de componentes: a partir da v6, a equipe de navegação criou uma biblioteca de componentes de elementos. Isto é útil para situações em que o usuário deseja construir um navegador personalizado
-
Navegação nativa: a biblioteca agora usa pilha nativa por padrão. Isso significa que em dispositivos mais antigos a navegação entre telas grandes é mais rápida e menos exigente
-
Plug-in Flipper: esta ferramenta permite aos desenvolvedores depurar seus aplicativos e monitorar o desempenho. Como excluir/desativar arquivos usados recentemente do File Explorer Na versão mais recente, agora existe um plugin oficial do React Navigation que facilita o processo de teste
O que é navegação React Native?
React Native Navigation é uma alternativa popular ao React Navigation. É um módulo que depende e foi projetado para ser usado com React Native. React Native Navigation é um pouco diferente porque usa diretamente a API de navegação nativa no iOS e Android, fornecendo assim uma aparência mais nativa.
Para explorar as diferenças entre React Navigation e React Native Navigation com mais detalhes, consulte “ React Navigation vs. React Native Navigation: Qual é o certo para você? ”
Outra opção: React Router Native
React Router Native é outra solução para implementar funcionalidade de navegação em aplicativos React Native. É desenvolvido pela equipe Remix, famosa por seu moderno framework web.
Compartilha a maior parte de seu código API React Router Native com a estrutura React Router. Isso significa que os desenvolvedores web que usaram o React Router acharão fácil começar a usar sua versão nativa.
Em termos de facilidade de uso, React Navigation e React Router Native são idênticos. Por exemplo, observe o seguinte código do roteador nativo:
importar {NativeRouter, Route, Link} de "react-router-native";
const Home = () => <Text>Home</Text>;
const Sobre = () => <Text>Sobre</Text>;
const App = () => (
<NativeRouter>
<View>
<View>
{/* Defina nossos links.
</NativeRouter>
);
Comparado à Navegação, podemos ver que o código é semelhante:
importar { NavigationContainer } de "@react-navigation/native";
importar {createNativeStackNavigator} de "@react-navigation/native-stack";
function HomeScreen() {
return (
<View>
<Text>Tela inicial</Text>
</View>
);
}
function AboutScreen() {
return (
<View>
<Text>Sobre a tela</Text>
</View>
);
}
const Stack = createNativeStackNavigator();
exportar função padrão App() {
return (
<NavigationContainer>
<Stack.Navigator>
{/*Definir nossas rotas*/}
<Stack.Screen name="Home" componente={HomeScreen} />
<Stack.Screen name="About" componente={AboutScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
O código usado para implementar o roteamento em ambas as bibliotecas é idêntico entre si. Esta é uma grande vantagem, pois significa que há uma curva de aprendizado menor para ambas as estruturas.
Se você tem experiência em desenvolvimento web, eu recomendaria o React Router Native, pois seu uso é o mesmo do React Router. Caso contrário, React Navigation deve ser a escolha certa. Notas interessantes - Compartilhe tutoriais valiosos! Por ter uma comunidade maior, pode fornecer mais apoio ao desenvolvimento.
Instale a navegação React
Supondo que você tenha o Yarn instalado, a primeira etapa é configurar seu aplicativo React Native. A maneira mais fácil de começar a usar o React Native é usar as ferramentas Expo, pois elas permitem iniciar um projeto sem instalar e configurar o Xcode ou o Android Studio.
Primeiro, inicialize um aplicativo Expo em branco usando o seguinte comando bash:
npx create-expo-app ReactNavigationDemo
Isso iniciará o processo de download e configurará o projeto:
Em seguida, entre na pasta do projeto e abra o editor de código:
cd ReactNavigationDemo
Se estiver usando o VS Code, você pode usar o seguinte comando para abrir a pasta atual no editor:
código.
Inicie o aplicativo usando o seguinte comando:
início da exposição npx
A próxima etapa é instalar a biblioteca React Native do projeto react-navigation:
npm install @react-navigation/native npx expo install react-native-screens react-native-safe-area-context
Navegador de pilha React Native
React Navigation é construído usando JavaScript, permitindo que você crie componentes e padrões de navegação que parecem verdadeiros nativos.
O React Navigation usa os chamados navegadores de pilha para gerenciar o histórico de navegação e a renderização das telas correspondentes com base na rota que o usuário segue dentro do aplicativo. Apenas uma tela é apresentada ao usuário por vez.
Imagine uma pilha de papel; navegar para uma nova tela coloca-o no topo da pilha e navegar para trás remove-o da pilha. Stack Navigator também fornece transições e gestos nativos do iOS e do Android. Observe que um aplicativo pode ter vários navegadores de pilha.
Exemplo de navegação React Native
Nesta seção, exploraremos alguns exemplos de padrões de navegação React Native e como implementá-los usando a biblioteca React Navigation.
1. Navegue entre os componentes da tela usando o navegador de pilha
Vamos primeiro criar uma pasta /components localizada na raiz do nosso projeto. Em seguida, criamos dois arquivos, Homescreen.js e Aboutscreen:
// Homescreen.js
importa React de "react";
import { Button, View, Text } from "react-native";
export
default function HomeScreen({ navigation }) {
return (
<View style={
{ flex: 1, alignItems: "center", justifyContent: "center" } }>
<Text>Tela inicial</Text>
<Button
title="Ir para Sobre"
onPress={() => navigation.navigate("Sobre")}
/>
</View>
);
}
Observe o suporte do botão acima onPress - explicaremos o que ele faz mais tarde.
// Aboutscreen.js
importa React, { Component } from "react";
importar {Botão, Visualização, Texto} de "react-native";
função padrão de exportação AboutScreen() {
return (
<View style={
{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Sobre a tela</Text>
</View>
);
}
A pasta do seu projeto deve ficar assim:
Vamos também fazer algumas alterações no App.js. Aqui temos que fazer as seguintes importações:
//informa ao React que implementaremos um navegador
import { NavigationContainer } from "@react-navigation/native";
//cria um navegador de pilha
import { createNativeStackNavigator } from "@react-navigation/native-stack";
É útil implementar nossa navegação no arquivo App.js raiz porque os componentes exportados de App.js são o ponto de entrada (ou componente raiz) de um aplicativo React Native e todos os outros componentes são descendentes.
Como você verá, agruparemos todos os outros componentes na função de navegação:
//
Importação de App.js * como React de "react";
importar {Visualizar, Texto} de "react-native";
importar { NavigationContainer } de "@react-navigation/native";
importar {createNativeStackNavigator} de "@react-navigation/native-stack";
importar HomeScreen de "./components/HomeScreen";
importar AboutScreen de "./components/AboutScreen";
const Stack = createNativeStackNavigator();
exportar função padrão App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" componente={HomeScreen} />
<Stack.
Nome da tela="Sobre" componente={AboutScreen} /> </Stack.Navigator>
}
);
No código acima, createNativeStackNavigator fornece uma maneira para nosso aplicativo fazer a transição entre telas, onde cada nova tela é colocada no topo da pilha. Ele está configurado para ter uma aparência familiar de iOS e Android: a nova tela desliza da direita no iOS e aparece na parte inferior no Android.
Aqui, executamos a função createNativeStackNavigator e armazenamos sua instância no Stack mutável.
Posteriormente, passaremos à nossa rota a tag Stack.Screen usando o seguinte. A rota Home corresponde à HomeScreen e a rota About corresponde à AboutScreen.
A função createStackNavigator é transmitida nos bastidores para navegar até os componentes HomeScreen e AboutScreen. Esta propriedade permite a navegação até o componente de tela especificado. É por isso que podemos usar HomeScreen.js em um botão que, quando pressionado, resulta em uma página AboutScreen, conforme mostrado abaixo:
<Button title="Ir para Sobre" onPress={() => navigation.navigate("Sobre")} />;
No código App.js, finalmente criamos um contêiner de aplicativo envolvendo o componente em uma tag NavigationContainer. Este contêiner gerencia o estado de navegação.
Para executar este aplicativo, você precisa baixar o aplicativo cliente Expo. Você pode obter versões iOS e Android. Certifique-se de que sua linha de comando aponte para a pasta do projeto e execute o seguinte comando:
início da exposição npx
Você deverá ver um código QR exibido no terminal. Use o aplicativo Expo no Android para escanear o código QR, e para o aplicativo iOS você pode escanear usando a câmera normal do iPhone, que solicitará que você clique no comando para abrir o aplicativo Expo:
2. Use a navegação por guias
A maioria dos aplicativos móveis possui várias telas. Um estilo de navegação comum em tais aplicativos móveis é a navegação baseada em guias. Aqui nos concentramos em como usar a função createBottomTabNavigator.
Antes de implementar a navegação baseada em guias, devemos primeiro instalar o módulo bottom-tabs assim:
npm install @react-navigation/bottom-tabs
Vamos adicionar outra tela ao nosso aplicativo criando um arquivo ContactScreen.js em /components:
importar React, {Componente} de "react";
importar {Botão, Visualização, Texto} de "react-native";
função padrão de exportação ContactScreen() {
return (
<View style={
{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Tela de contato</Text>
</View>
);
}
Agora vamos adicionar a importação ao topo do arquivo App.js:
importar ContactScreen de './components/ContactScreen';
Lembre-se de que é útil implementar a navegação no componente raiz App.js. Portanto, implementaremos nossa navegação por guias importando createBottomTabNavigator em App.js. Vamos substituir createStackNavigator por esta linha de código:
importar {createBottomTabNavigator} de '@react-navigation/bottom-tabs';
Além disso, execute a função createBottomTabNavigator:
const Tab = createBottomTabNavigator();
//código adicional...
<NavigationContainer>
<Tab.Navigator inicialRouteName="Home">
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="About" component={AboutScreen} />
</Tab.Navigator>
</NavigationContainer>;
Adicione uma nova parte Tab.Screen da tela usando o seguinte comando:
<Tab.Navigator>
<Tab.Screen name="Home" componente={HomeScreen} />
<Tab.Screen name="About" componente={AboutScreen} />
<Tab.Screen name="Contact" componente={ContactScreen } />
</Tab.Navigator>
Se você executar o aplicativo npm start e abri-lo em seu cliente Expo, deverá ver a navegação inferior implementada:
3. Use a navegação de gaveta
Para começar a implementar a gaveta de navegação imediatamente, primeiro instale as dependências necessárias:
npm install @react-navigation/drawer npx expo install react-native-gesture-handler react-native-reanimated
A seguir, acesse a documentação do Reanimated para configurar controles de gestos em seu projeto.
Depois de concluir esta etapa, escreva estas instruções de importação em App.js:
importar "manipulador de gestos react-nativos"; //esta deve ser a primeira importação no seu código
import { createDrawerNavigator } from "@react-navigation/drawer";
Vamos também atualizar a mutabilidade do AppNavigator:
const Gaveta = createDrawerNavigator();
<Drawer.Navigator inicialRouteName="Home">
<Stack.Screen name="Home" componente={HomeScreen} />
<Stack.Screen name="About" componente={AboutScreen} />
<Stack.Screen name="Contato "component={ContactScreen} />
</Drawer.Navigator>
Se você iniciar o npm, poderá ver as alterações imediatamente. Deslize da esquerda para visualizar a gaveta de navegação:
Você pode personalizar a gaveta de navegação adicionando um ícone próximo ao nome da rota. Na pasta de ativos do projeto, existem atualmente três ícones:
Podemos personalizar navigationOptions adicionando ao seguinte arquivo de componente de tela:
<NavigationContainer>
<Drawer.Navigator inicialRouteName="Home">
<Drawer.Screen
name="Home"
component={HomeScreen}
options={
{ //alterar a configuração da nossa tela
drawIcon: ({ cor, número, foco }) => { //definir o ícone:
return ( //o ícone será uma imagem
<Image
source={require("../assets/home-icon.png")}
style={
{ height: 30, width: 30 }}
/>
);
},
}}
/>
<Gaveta.
{
gavetaIcon: ({ cor, número, foco }) => { //definir o ícone para todas as telas
return (
<Image
source={require("../assets/about-icon.png")}
style={
{ altura: 30, largura: 30 }}
/>
);
},
}}
/>
<Drawer.Screen
name="Contact"
component={ContactScreen}
options={
{
gavetaIcon: ({ cor, número, foco }) => {
return (
<Image
source={require(".. /assets/contact-icon.png")}
estilo={
{ altura: 30, largura: 30 }}
/>
);
},
}}
/>
</Drawer.Navigator>
</NavigationContainer>
O gavetaActiveTintColorprop permite aplicar qualquer cor com base no estado ativo ou inativo das guias e rótulos de navegação. Por exemplo, podemos alterar a cor do estado ativo do rótulo da gaveta de navegação. Vá até a variável Drawer.Navigator e adicione ao objeto de opções:
<Drawer.Navigator
inicialRouteName="Home"
screenOptions={
{ gavetaActiveTintColor: "#e91e63" }}
>
//... código adicional.
Isso resulta em uma mudança de cor:
Passe parâmetros para a tela no React Navigation
Existem duas etapas simples para passar parâmetros para uma rota:
-
Passe parâmetros para uma rota colocando-os em um objeto como segundo parâmetro
navegação.navigate
Função:
navigation.navigate('RouteName', { /* parâmetros vão aqui */ }) -
Leia os parâmetros no componente da tela:
export default function HomeScreen({ route, navigation }) { // a variável 'route' nos fornece informações na página. // Ela também armazena os parâmetros e seus valores const { paramName } = route; //nosso parâmetro 'paramName' é armazenado aqui. //..código adicional .. }
Finalmente, para definir o título do título, podemos usar a propriedade title da propriedade options assim:
<Drawer.Screen
name="Home"
component={HomeScreen}
options={
{
title: "Home Page", //define o título da página como 'Home page'
}}
/>
para concluir
Espero que este artigo ajude você a usar rapidamente o pacote React Navigation em seus projetos React Native existentes ou futuros.
Há muito mais a fazer e o React Navigation atenderá à maioria das suas necessidades. Para saber mais, verifique a documentação do React Navigation e fique à vontade para obter o código final em meu repositório GitHub.