Material 底部分頁標籤導覽器

危險

material-bottom-tabs 導覽器已移至 react-native-paper。請參閱 react-native-paper 的文件 以取得安裝說明、使用指南與 API 參考。對於導覽器的任何問題，請於 react-native-paper 的儲存庫 中開啟一個問題。

一種以 material design 為主題的底部螢幕分頁標籤列，讓你能夠於不同的路線之間以動畫的方式切換。路線是以惰性初始化的，其螢幕元件直到首次聚焦才會裝載。

它會包覆 BottomNavigation 元件，來自 react-native-paper。如果 設定 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 prop 的初始畫面，否則預設為第一個畫面
• order - 返回焦點畫面之前定義的畫面
• history - 返回在導覽器中最後一次前往的畫面；如果多次前往相同的畫面，則會從歷程中移除較早的記錄
• none - 不處理返回按鈕

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 以顯示一個點 字串 或 數字 以顯示文字。

tabBarAccessibilityLabel

分頁按鈕的可存取標籤。當使用者點選分頁時，螢幕朗讀器會讀出此標籤。如果你尚未為分頁設定標籤，建議將此設定設為 true.

tabBarTestID

在測試中找出此分頁按鈕的 ID。

事件

瀏覽器可以對某些動作 發送事件。支援的事件如下

tabPress

當使用者在分頁列按一下當前螢幕的分頁按鈕時，會引發此事件。預設情況下，按下分頁會進行下列動作

• 如果分頁未聚焦，會將焦點對應到分頁
• 如果分頁已聚焦
  • 如果分頁的螢幕呈現捲動檢視， puedes 使用 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 中的主題支持，透過將應用程式包覆在 Provider from react-native-paper 中，來自訂材質底部導覽列。這種情況的常見用途可能是，當你的應用程式有深色主題時，自訂畫面背景顏色。按照 react-native-paper 文件中的指示，瞭解如何自訂主題。