Como construir um sistema de navegação móvel com React Navigation

Os aplicativos móveis devem ter um sistema de navegação que guie os usuários sem esforço por várias telas e funcionalidades.

O React Navigation, uma biblioteca de navegação poderosa e flexível para React Native, pode ajudá-lo a criar essa experiência. Ao aproveitar seus recursos, você pode construir sem esforço um ótimo sistema de navegação móvel.

Instalando a biblioteca de navegação do React

O React Navigation oferece três padrões de navegação principais, ou seja, a navegação Stack, Tab e Drawer para construir um sistema de navegação. Esses padrões de navegação fornecem uma estrutura para organizar e gerenciar a navegação entre diferentes telas em seu aplicativo.

Para começar a usar o React Navigation, instale a biblioteca e suas dependências necessárias:

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context

Configurando um navegador

Cada navegador dentro do React Navigation vive em sua própria biblioteca separada. Para usar qualquer um dos navegadores, você terá que instalá-los individualmente.

Uma estrutura de projeto bem pensada é útil ao criar um sistema de navegação para seu aplicativo móvel. Uma boa prática é criar um origem pasta no diretório raiz do seu projeto. Dentro desta pasta, você deve ter um telas pasta. Isso servirá para separar os componentes da tela de outros componentes.

Você estará escrevendo o código para configurar o padrão de navegação que está usando dentro do seu projeto App.js arquivo.

Criando um navegador dentro do App.js arquivo é uma prática recomendada por vários motivos:

• O App.js normalmente é o componente de nível superior em um aplicativo React Native. Definir o Navegador neste arquivo garantirá que a hierarquia de navegação esteja no nível mais alto da sua árvore de componentes e acessível por toda parte.
• Colocando o Navegador no App.js O arquivo permite que você acesse e transmita facilmente o estado e os adereços de todo o aplicativo para as telas do navegador.
• Navegação do React NavigationContainer fornece o contexto necessário para a navegação e normalmente está localizado dentro App.js. Ao colocar o Navegador no mesmo arquivo, você pode integrá-lo facilmente com o NavigationContainer.

Navegador de Pilha

O Stack Navigator é o padrão de navegação mais popular dentro da biblioteca React Navigation. Ele usa uma estrutura de dados de pilha onde cada tela é um componente completamente diferente e é empilhado em cima do anterior.

Quando uma nova tela é colocada no topo da pilha, ela se torna a tela ativa e a tela anterior é lançada abaixo dela. Isso permite que os usuários naveguem para frente e para trás na pilha, como o fluxo de navegação de um site. Você pode configurar o navegador de pilha para fazer a transição de uma tela para outra.

Por exemplo:

importar Reagir de'reagir';
importar { NavigationContainer } de'@react-navigation/native';
importar {criarStackNavigator} de'@react-navigation/stack';
// Importa os componentes da tela
importar Tela inicial de'./screens/HomeScreen';
importar TelaDetalhes de'./screens/DetailsTela';
const Pilha = createStackNavigator();
const aplicativo = () => {
retornar (


"Lar" componente={HomeScreen} />
"Detalhes" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
exportarpadrão Aplicativo;

O bloco de código acima cria um componente Stack Navigator usando createStackNavigator() da biblioteca de navegação.

Neste exemplo, o Stack Navigator tem duas telas: Lar e Detalhes.

Agora instale o Stack Navigator:

npm install @react-navigation/stack

Dentro Tela inicial, você pode usar o navegação objeto para testar o Stack Navigator:

importar { Folha de Estilo, Exibir, Botão } de"react-native";
importar Reagir de"reagir";
const Tela Inicial = ({ navegação }) => {
retornar (

 titulo="Navegar para .."
 onPress={() => navigation.navigate("DetailScreen")}
 />
 </View>
 );
};
exportarpadrão Tela inicial;
const estilos = StyleSheet.create({});

Observe como o Stack Navigator cria automaticamente um botão de seta para manipular a navegação de volta para as telas anteriores.

Navegador de guias

Em algumas situações, ter um sistema de navegação de vaivém como o Stack Navigator não oferece uma ótima experiência. Um Tab Navigator é mais adequado para esses casos. Ele exibe as telas de navegação disponíveis antecipadamente para o usuário e pode ser mais fácil de usar, como uma barra de navegação na web.

Para começar, instale o @react-navigation/bottom-tabs biblioteca usando o gerenciador de pacotes NPM.

Com createBottomNavigator(), você pode criar uma instância do Tab Navigator como fez com o Stack Navigator:

importar { createBottomTabNavigator } de'@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();

E então, defina as telas que você deseja como guias dentro do navegador e NavigationContainer:

exportarpadrãofunçãoAplicativo() {
retornar (


 nome="Lar"
 componente={HomeScreen}
 opções={{ título: "Lar" }}
 />
 nome="Perfil"
 componente={ProfileScreen}
 opções={{ título: "Perfil" }}
 />
 nome="Detalhes"
 componente={DetailScreen}
 opções={{ título: "Detalhes" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

Ao executar seu aplicativo, você verá um Tab Navigator com suas telas definidas na parte inferior.

Você poderia usar o tabBarPosition oopção para posicionar o navegador no principal, certo, esquerda, ou fundo (padrão).

Navegador de gaveta

Navegadores de gaveta, ou gavetas, são um padrão de navegação comum em aplicativos móveis. Você pode abrir as gavetas deslizando ou tocando em um botão. Isso faz com que a gaveta deslize pela lateral da tela, revelando seu conteúdo.

Para usar o Drawer Navigator, instale-o junto com manipulador de gestos nativo de reação e reagir-nativo-reanimado:

npm install @react-navigation/drawer
npm install react-native-gesture-handler react-native-reanimated

Você também precisará configurar o reanimado dentro do seu babel.config.js arquivo:

módulo.exportações = {
 predefinições: ["babel-preset-expo"],
 plug-ins: ["react-native-reanimated/plugin"],
};

Aqui está um exemplo de como configurar um navegador de gaveta:

importar"manipulador de gestos nativo de reação"; // Esta importação deve estar no topo
importar { Ver, Texto, Botão } de"react-native";
importar {criarDrawerNavigator} de"@react-navigation/drawer";
importar { NavigationContainer } de"@react-navigation/native";
const Gaveta = createDrawerNavigator();
const DrawerContent = ({ navegação }) => {
retornar (
flex: 1, alinhar itens: "Centro", justificarConteúdo: "Centro" }}>
tamanho da fonte: 24, espessura da fonte: "audacioso" }}>
 Bem-vindo à Gaveta
 </Text>

 Este é um conteúdo extra que você pode exibir em a gaveta.
 </Text>
"Fechar Gaveta" onPress={() => navigation.closeDrawer()} />
 </View>
 );
};
const aplicativo = () => (

 inicialRouteName="Lar"
 gavetaConteúdo={(props) => <Conteúdo da Gaveta {...adereços} />}
 >
 {/* Suas outras telas aqui */}
 </Drawer.Navigator>
 </NavigationContainer>
);
exportarpadrão Aplicativo;

Neste exemplo, o Conteúdo da Gaveta componente é passado como o conteúdo da gaveta suporte para createDrawerNavigator. Dentro de Conteúdo da Gaveta componente, você pode personalizar o conteúdo para exibir as informações desejadas usando componentes de texto ou qualquer outro elemento e estilo.

Os navegadores de guia são estáticos e sempre visíveis. Isso nem sempre é o melhor, pois as guias bloqueiam partes da tela e podem desviar o foco da tela principal. Você pode usar gavetas como um navegador de abas dinâmico e criar um menu de navegação dentro das gavetas. Os usuários podem então abrir a gaveta para encontrar um menu de navegação.

Você também pode usar a gaveta para exibir conteúdo adicional, como uma barra de pesquisa, um perfil de usuário, informações contextuais ou qualquer coisa que não exija exibição em tela cheia.

Considere estas práticas recomendadas para aproveitar ao máximo o Navegador de gavetas:

• Evite sobrecarregar a gaveta com muitas opções e concentre-se em apresentar os recursos mais relevantes e usados ​​com frequência.
• Categorize os itens relacionados de forma lógica e intuitiva para ajudar os usuários a encontrar rapidamente o que estão procurando.
• Use ícones ou indicadores visuais para ajudar os usuários a entender a finalidade de cada item na gaveta.

Passando dados com adereços de navegação

O React Navigation fornece um mecanismo poderoso que permite passar dados por meio de props de navegação.

Considere um cenário em que você tem uma lista de itens em uma tela e, quando um usuário seleciona um item, deseja passar os dados correspondentes para outra tela.

Primeiro, você precisa definir sua estrutura de navegação. Agora, para passar os dados do Tela inicial para um TelaDetalhes quando um item é selecionado, dentro Tela inicial defina uma função que trate da navegação e inclua os dados que você deseja passar.

importar Reagir de'reagir';
importar { Ver, Texto, Botão } de'reagir nativo';
const Tela Inicial = ({ navegação }) => {
const handleItemPress = (item) => {
 navegação.navigate('DetailScreen', { item });
 };
retornar (

Lista de Itens</Text>
"Item 1" onPress={() => handleItemPress('Dados do item 1')} />
"Item 2" onPress={() => handleItemPress('Dados do item 2')} />
 </View>
 );
};
exportarpadrão Tela inicial;

O handleItemPress função utiliza o navegação.navigate método para navegar até o TelaDetalhes ao passar os dados do item selecionado como um parâmetro no segundo argumento.

Para poder acessar os dados passados ​​dentro do TelaDetalhes componente, você precisará do navegação suporte:

importar Reagir de'reagir';
importar { Ver, Texto } de'reagir nativo';
const DetailScreen = ({ navegação }) => {
const item = navegação.getParam('item', '');
retornar (

Tela de Detalhes</Text>
{item}</Text>
 </View>
 );
};
exportarpadrão DetailScreen;

Aqui o TelaDetalhes componentes usam navegação.getParam para recuperar o item passado dos adereços de navegação. Neste exemplo, um valor padrão de uma string vazia é definido caso os dados não estejam disponíveis. Dessa forma, seu aplicativo não falhará na renderização.

Dependendo da complexidade do seu aplicativo, você pode explorar usando bibliotecas de gerenciamento de estado como Redux ou a API de contexto para gerenciar e compartilhar dados globalmente.

Organizando seu código de navegação

A organização adequada do seu código de navegação ajudará você a criar um aplicativo React Native escalável e colaborativo. Você pode fazer isso dividindo a lógica de navegação em módulos gerenciáveis. Isso facilitará a leitura e compreensão.

Com isso, você pode ter certeza de criar uma navegação perfeita para seus usuários enquanto aproveita a experiência de desenvolvimento.