Para projetos móveis, as guias desempenham um papel crucial na orientação dos usuários através de um fluxo de aplicativo. Existem muitas variações de guias que podem ser usadas, como as guias inferior ou superior.
Se você estiver criando seu aplicativo no React Native, existem várias bibliotecas que oferecem a capacidade de adicionar guias para você. Neste artigo, daremos uma olhada em alguns dos mais populares e discutiremos as melhores maneiras de adicionar guias ao seu aplicativo móvel.
Este artigo se concentra na navegação por guias que se integra com React Navigation , uma das bibliotecas de navegação mais comuns e a única que React recomenda. Alguns outros incluem react-native-router-flow ou react-native-navigation, mas sempre achei o React Navigation mais fácil de usar e mais extensível para construir aplicativos nativos de alta qualidade. Além disso, é o mais popular e tem o maior número de bibliotecas disponíveis.
Navegação no React Native
Para entender como essas bibliotecas funcionam, primeiro teremos que falar sobre navegação. Em aplicativos móveis, você tem o que é chamado de “pilha” de telas. O React Navigation serve como a biblioteca base para realmente empurrar e limpar esta pilha.
Acima da biblioteca de navegação base, você tem sua estratégia de navegação, como gavetas, pilhas ou guias. Todos eles interagem com o React Navigation para empurrar ou limpar telas da pilha de maneiras diferentes.
Por exemplo, esta é a configuração de um navegador de pilha simples que fornece uma única tela:
import * as Reagir de’reagir’; import {View, Text} de’react-native’; importar {NavigationContainer} de’@ react-navigation/native’; importar {createStackNavigator} de’@ react-navigation/stack’; function HomeScreen () {return (
Você pode ver que criamos um objeto de navegação e, em seguida, criamos um Navegador de wrapper e, sob ele, várias telas usando Stack.Screen.
Esta é a maneira mais básica de representar sua navegação, mas também é super simples de usar. Esta é uma ótima solução ao trabalhar com aplicativos que são simples ou têm poucas telas.
Navegador de guias inferiores
A primeira biblioteca que veremos é a Guias inferiores Navigator. A opção mais básica para fornecer navegação com guias, isso cria “Uma barra de guias simples na parte inferior da tela que permite alternar entre diferentes rotas”, de acordo com a documentação do React Navigation .
As rotas são inicializadas lentamente, então seus componentes de tela não são montados até que sejam focalizados pela primeira vez.
Usar esta biblioteca é muito simples: certifique-se de ter @ react-navigation/native instalado e instale [@ react-navigation/bottom-tabs] ( https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs ).
O uso é muito semelhante ao navegador de pilha que vimos em o exemplo anterior.
Este componente é altamente configurável para atender às suas necessidades. Você pode passar um componente da barra de guias para lidar com a renderização e visualização da barra de guias na parte inferior.
Algumas outras opções de configuração incluem a capacidade de personalizar o estilo da barra de guias padrão ou telas ou ouvir eventos diferentes.
Essas guias inferiores são super simples e simples, mas também muito extensíveis. Se você está tentando construir algo mais avançado para sua navegação com guias, esta é uma ótima biblioteca para construir e estilizar porque ela expõe quase todas as opções de estilo para o usuário.
Por exemplo, você pode Passe seu próprio botão usando a prop tabBarButton ou estilize diretamente a barra de guias com a prop tabBarStyle.
Isso a torna realmente poderosa para usar em aplicativos onde você precisa de muita personalização.
Material Bottom Tabs Navigator
Se você estiver criando seu aplicativo com o destino especificação do Material Design em mente, o Navegador de guias inferiores do material pode ser uma ótima opção para você.
Esta biblioteca envolve o componente BottomNavigation de papel reac-nativo e cria uma opção de navegação compatível com Material Design que é fácil de usar imediatamente!
Esta biblioteca é muito fácil de configurar e usar:
import {createMaterialBottomTabNavigator} de’@ react-navigation/material-bottom-tabs’; const Tab=createMaterialBottomTabNavigator (); function MyTabs () {return (
Por ser uma biblioteca compatível com o material, fácil de usar, ela não inclui muitas opções para personalizar o estilo das guias sem usar o suporte a temas que o react-native-paper fornece.
O Material Bottom Tabs Navigator é uma ótima solução quando você está construindo um aplicativo de material ou precisa de uma solução que possa integrar com muito poucas configurações. Ele se integra perfeitamente com temas de materiais. Infelizmente, por ser um material, você não pode personalizar tanto o estilo, então provavelmente não é ótimo para um aplicativo que requer muitos estilos personalizados.
Navegador das guias superiores do material
Se um navegador posicionado na parte inferior não atrai você e você deseja uma solução pronta para usar que usa uma interface mais parecida com TabView, esta é a biblioteca para você!
O Navegador das Guias Superiores do Material envolve a visualização da guia react-native para fornecer um navegador com guias de ótima aparência para o seu React Native aplicativo que se alinha com o tema Material.
Usando este ótimo a biblioteca é super simples, basta instalar as dependências:
yarn add @ react-navigation/material-top-tabs react-native-tab-v iew@^2.16.0
Em seguida, configure-o da seguinte forma:
import {createMaterialTopTabNavigator} from’@ react-navigation/material-top-tabs’; const Tab=createMaterialTopTabNavigator (); function MyTabs () {return (
Esta biblioteca pode ser facilmente personalizada para se adequar a qualquer estilo ou uso que seu aplicativo precise.
Embora as guias superiores não sejam ótimas para sua estratégia de navegação principal, elas podem ser úteis para submenus ou ocultação grandes quantidades de detalhes que podem não ser valiosos para os usuários. Como eles são estilizados com Material, eles se encaixam perfeitamente em um aplicativo de Material, mas não são muito personalizáveis para designs específicos.
React Native MultiBar
Se você estiver procurando por algum funcionalidade mais avançada em sua barra de guias, MultiBar é uma ótima biblioteca com um barra de guias repleta de recursos.
Você pode ver que as ações estendidas podem ser adicionadas no botão avançado, como as ações pop-out no botão principal.
Ao usar o componente MultiBarButton, você pode criar uma série de ações pop-out.
Embora o Multibar tenha algumas excelentes recursos adicionais, a API é mais difícil de usar como desenvolvedor e um pouco mais complexa do que as outras bibliotecas. No entanto, a multibar expansível é uma adição excelente e única que oferece muito potencial para funcionalidade adicional.
React Native Animated TabBar
Se você estiver procurando por mais animações em seu barra de guias, TabBar animado é a biblioteca para você. Ele se integra perfeitamente ao React Navigation e tem lindas animações integradas, tornando-se uma ótima solução para o seu aplicativo.
Para instalar:
yarn add @ gorhom/animated-tabbar
Você também precisará instalar o react-native-reanimated, react-native-gesture-handler e react-native-svg para que esta biblioteca funcione corretamente.
Esta biblioteca inclui três animações padrão , Bubble, Flashy e Material que são todos animados e ficam ótimos com o aplicativo.
Se você pode usar uma das animações padrão, esta é uma bela escolha para seus aplicativos. Embora seja relativamente pesado, ele ainda está otimizado para rodar a 60 fps.
Pode ser um pouco mais difícil escrever seus próprios estilos de animação, mas esta biblioteca ainda fornece uma base sólida para você fazer isso.
Conclusão
As cinco opções para navegação com guias neste guia fornecem uma grande variedade de opções (algumas pré-construídas e outras destinadas a serem mais personalizadas) para implementar a navegação com guias em seu aplicativo React. Boas construções!
