材质底部标签导航器

危险

material-bottom-tabs 导航器已移至 react-native-paper。请参考 react-native-paper 的文档 获取安装说明、使用指南和 API 参考。如果您遇到导航器问题，请在 react-native-paper 的仓库 中提交问题。

一个位于屏幕底部的材质设计主题标签栏，允许您在不同的路由之间切换，并带有动画效果。路由是延迟初始化的 - 它们的屏幕组件只有在首次获得焦点时才会被挂载。

它包装了来自 react-native-paper 的 BottomNavigation 组件。如果您 配置 Babel 插件，它不会将整个 react-native-paper 库包含在您的包中。

安装

要使用此导航器，请确保您已安装 @react-navigation/native 及其依赖项（请遵循本指南），然后安装 @react-navigation/material-bottom-tabs

npm

npm install @react-navigation/material-bottom-tabs react-native-paper react-native-vector-icons

Yarn

yarn add @react-navigation/material-bottom-tabs react-native-paper react-native-vector-icons

pnpm

pnpm add @react-navigation/material-bottom-tabs react-native-paper react-native-vector-icons

此 API 还要求您安装 react-native-vector-icons！如果您使用的是 Expo 管理工作流程，则无需任何额外步骤即可使用。否则，请遵循这些安装说明。

要使用此选项卡导航器，请从 @react-navigation/material-bottom-tabs 中导入它

API 定义

💡 如果您在使用 createMaterialBottomTabNavigator 时遇到任何错误，请在 react-native-paper 而不是 react-navigation 存储库中打开问题！

要使用此选项卡导航器，请从 @react-navigation/material-bottom-tabs 中导入它

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>
  );
}

注意

有关完整的用法指南，请访问 选项卡导航

路由配置

路由配置对象是路由名称到路由配置的映射。

道具

Tab.Navigator 组件接受以下道具

id

导航器的可选唯一 ID。这可以与 navigation.getParent 一起使用，以便在子导航器中引用此导航器。

initialRouteName

在首次加载导航器时要渲染的路由的名称。

screenOptions

用于导航器中屏幕的默认选项。

backBehavior

此属性控制在导航器中调用 goBack 时发生的行为。这包括按下设备的返回按钮或 Android 上的返回手势。

它支持以下值

• firstRoute - 返回导航器中定义的第一个屏幕（默认）
• initialRoute - 返回 initialRouteName 属性中传递的初始屏幕，如果未传递，则默认为第一个屏幕
• order - 返回聚焦屏幕之前的屏幕
• history - 返回导航器中最后访问的屏幕；如果同一个屏幕被访问多次，则历史记录中较旧的条目将被删除
• none - 不处理返回按钮

shifting

如果使用 shifting 样式，则活动标签图标将向上移动以显示标签，而非活动标签将没有标签。

默认情况下，当您拥有超过 3 个标签时，此值为 true。传递 shifting={false} 以显式禁用此动画，或 shifting={true} 以始终使用此动画。

labeled

是否在标签中显示标签。当 false 时，仅显示图标。

activeColor

活动标签中图标和标签的自定义颜色。

inactiveColor

非活动标签中图标和标签的自定义颜色。

barStyle

底部导航栏的样式。您可以在此处传递自定义背景颜色

<Tab.Navigator
  initialRouteName="Home"
  activeColor="#f0edf6"
  inactiveColor="#3e2465"
  barStyle={{ backgroundColor: '#694fad' }}
>
  {/* ... */}
</Tab.Navigator>

如果您在 Android 上有半透明的导航栏，您也可以在此处设置底部填充

<Tab.Navigator
  initialRouteName="Home"
  activeColor="#f0edf6"
  inactiveColor="#3e2465"
  barStyle={{ paddingBottom: 48 }}
>
  {/* ... */}
</Tab.Navigator>

选项

以下 选项 可用于配置导航器中的屏幕

title

通用标题，可作为 headerTitle 和 tabBarLabel 的备用标题。

tabBarIcon

函数，接收 { focused: boolean, color: string } 并返回一个 React.Node，用于在标签栏中显示。

tabBarColor

当标签栏中对应屏幕的标签处于活动状态时，标签栏的颜色。用于波纹效果。仅在 shifting 为 true 时支持。

tabBarLabel

在标签栏中显示的标签的标题字符串。如果未定义，则使用场景的 title。要隐藏，请参阅上一节中的 labeled 选项。

tabBarBadge

在标签图标上显示的徽章，可以是 true 以显示一个点，string 或 number 以显示文本。

tabBarAccessibilityLabel

标签按钮的可访问性标签。当用户点击标签时，屏幕阅读器会读取此标签。如果您没有标签的标签，建议设置此标签。

tabBarTestID

在测试中定位此标签按钮的 ID。

事件

导航器可以在某些操作时 发出事件。支持的事件有

tabPress

当用户按下标签栏中当前屏幕的标签按钮时，会触发此事件。默认情况下，按下标签会执行以下操作

• 如果标签未处于焦点状态，按下标签将使该标签处于焦点状态
• 如果标签已处于焦点状态
  • 如果选项卡的屏幕渲染了一个滚动视图，您可以使用 useScrollToTop 将其滚动到顶部
  • 如果选项卡的屏幕渲染了一个堆栈导航器，则会在堆栈上执行 popToTop 操作

要阻止默认行为，您可以调用 event.preventDefault

React.useEffect(() => {
  const unsubscribe = navigation.addListener('tabPress', (e) => {
    // Prevent default behavior

    e.preventDefault();
    // Do something manually
    // ...
  });

  return unsubscribe;
}, [navigation]);

辅助函数

选项卡导航器将以下方法添加到导航道具中

jumpTo

导航到选项卡导航器中的现有屏幕。该方法接受以下参数

• name - 字符串 - 要跳转到的路由的名称。
• params - 对象 - 传递给目标路由的屏幕参数。

navigation.jumpTo('Profile', { name: 'Michaś' });

示例

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const Tab = createMaterialBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Feed"
      activeColor="#e91e63"
      barStyle={{ backgroundColor: 'tomato' }}
    >
      <Tab.Screen
        name="Feed"
        component={Feed}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Notifications"
        component={Notifications}
        options={{
          tabBarLabel: 'Updates',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="bell" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{
          tabBarLabel: 'Profile',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="account" color={color} size={26} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

与 react-native-paper 一起使用（可选）

您可以使用 react-native-paper 中的主题支持来定制材质底部导航，方法是将您的应用程序包装在 react-native-paper 中的 Provider 中。一个常见的用例是，当您的应用程序具有深色主题时，定制屏幕的背景颜色。请遵循 react-native-paper 文档中的说明 了解如何定制主题。