顶级React Native标签导航组件

对于移动项目来说，标签在引导用户浏览应用流程方面起着至关重要的作用。有许多标签的变化可以使用，比如底部或顶部标签。

如果你在React Native中构建你的应用程序，有几个库提供了为你添加标签的能力。在这篇文章中，我们将看一下一些流行的，并讨论在你的移动应用中添加标签的最佳方式。

本文重点讨论与React Navigation集成的标签导航，这是最常见的导航库之一，也是React推荐的库。其他一些包括react-native-router-flux 或react-native-navigation ，但我一直认为React Navigation更容易使用，而且更容易扩展，可以构建高质量的本地应用。另外，它是最流行的，有最多的库可用。

React Native中的导航

要了解这些库如何工作，我们首先要谈谈导航。在移动应用程序中，你有一个所谓的 "堆栈 "屏幕。React Navigation作为基础库，用于实际推送和清除这个堆栈。

在基础导航库之上，你有你的导航策略，如抽屉、堆栈或标签。这些都与React Navigation交互，以不同的方式从堆栈中推送或清除屏幕。

例如，这是一个简单的堆栈导航器的配置，它提供了一个单一的屏幕。

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

你可以看到我们创建了一个导航对象，然后创建了一个封装器Navigator ，在它下面，使用Stack.Screen ，创建了各种屏幕。

这是最基本的表示你的导航的方式，但也是超级简单的使用方式。在处理那些简单的或者屏幕很少的应用程序时，这是一个很好的解决方案。

底部标签导航器

我们要看的第一个库是底部标签导航器。这是提供标签式导航的最基本的选择，根据React导航文档，它创建了 "屏幕底部的一个简单的标签栏，让你在不同的路线之间切换"。

路由被懒散地初始化了，所以它们的屏幕组件在第一次被聚焦之前不会被安装。

来源

使用这个库非常简单：确保你安装了@react-navigation/native ，然后安装 [@react-navigation/bottom-tabs]([https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs)).

使用方法与我们在前面的例子中看到的堆栈导航器非常相似。

这个组件是高度可配置的，以满足你的需求。你可以传入一个标签栏组件来处理底部的标签栏的渲染和可视化。

其他一些配置选项包括能够定制默认标签栏或屏幕的样式，或监听不同的事件。

这些底部的标签是超级简单和朴素的，但也是非常可扩展的。如果你想为你的标签式导航建立一些更高级的东西，这是一个很好的库，可以围绕它进行设计，因为它向用户暴露了几乎所有的样式选项。

例如，你可以使用tabBarButton 道具传递你自己的按钮，或者使用tabBarStyle 道具直接设计标签栏。

这使得它在需要大量定制的应用程序中的使用非常强大。

材料底部标签导航器

如果你在构建你的应用程序时考虑到了Material Design规范，Material Bottom Tabs Navigator可能是你一个很好的选择。

这个库围绕着react-native-paper BottomNavigation 组件，创建了一个符合Material Design规范的导航选项，开箱就能使用！这个库非常容易设置。

这个库非常容易设置和使用。

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

const Tab = createMaterialBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

因为这是要成为一个易于使用的、符合Material标准的库，它不包括很多选项来定制标签的风格，而不使用react-native-paper 提供的主题支持。

当你正在构建一个Material应用时，Material Bottom Tabs Navigator是一个很好的解决方案，或者你需要一个可以用很少的配置来整合的解决方案。它与Material主题的整合非常好。不幸的是，因为它是Material，你不能像以前那样定制风格，所以它可能不适合需要大量定制风格的应用程序。

材料顶部标签导航器

如果一个底部定位的导航器对你没有吸引力，你想要一个开箱即用的解决方案，使用一个更像TabView的界面，这就是你的库

Material Top Tabs Navigator围绕着react-native-tab-view ，为你的React Native应用提供了一个与Material主题一致的漂亮的标签式导航器。

来源

使用这个伟大的库是非常简单的，只需安装依赖项。

yarn add @react-navigation/material-top-tabs react-native-tab-view@^2.16.0

然后像这样进行设置。

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

这个库可以很容易地定制，以适应你的应用程序需要的任何风格或使用需求。

虽然顶部标签对于你的主要导航策略来说不是很好，但它们对于子菜单或隐藏大量的细节是很有用的，这些细节最初可能对用户没有价值。因为这些是用Material设计的，所以它们很适合Material应用，但对于特定的设计来说，不会有很好的可定制性。

React原生多栏

如果你想在你的标签栏中寻找一些更高级的功能，MultiBar是一个伟大的库，它有一个功能丰富的标签栏。

你可以看到高级按钮上可以添加扩展动作，就像主按钮上的弹出动作。

来源

通过使用MultiBarButton 组件，你可以创建一系列的弹出动作。

虽然Multibar有一些很好的附加功能，但作为一个开发者，其API更难使用，而且比其他库更复杂一些。然而，扩展的多栏是一个伟大的、独特的补充，它为额外的功能注入了很多潜力。

React Native动画标签条

如果你想在你的标签栏中寻找更多的动画，Animated TabBar是你的库。它与React Navigation很好地整合在一起，并内置了漂亮的动画，使它成为你的应用程序的一个伟大的解决方案。

要安装。

yarn add @gorhom/animated-tabbar

你还需要安装react-native-reanimated,react-native-gesture-handler, 和react-native-svg 以使该库正常工作。

这个库包括三个默认的动画，Bubble,Flashy, 和Material ，它们都是动画，在应用中看起来很棒。

如果你能使用其中一个默认的动画，这对你的应用程序来说是一个漂亮的选择。虽然相对重量级，但它仍被优化为以60fps的速度运行。

编写你自己的动画风格可能会有点困难，但这个库仍然为你提供了一个强大的基础来做到这一点。

总结

本指南中关于标签式导航的五个选项为在你的React应用中实现标签式导航提供了大量的选择（有些是预建的，有些是需要更多的定制）。祝你建设愉快!

The postTop React Native tab navigation componentsappeared first onLogRocket Blog.