マテリアルボトムタブナビゲーター

危険

material-bottom-tabs ナビゲーターは react-native-paper に移動しました。インストール手順、使用ガイド、API リファレンスについては、代わりに react-native-paper のドキュメント を参照してください。ナビゲーターに関する問題については、react-native-paper のリポジトリ で問題を提起してください。

画面下部にマテリアルデザインのテーマのタブバーがあり、アニメーション付きで異なるルートを切り替えることができます。ルートは遅延初期化されます。つまり、画面コンポーネントは最初にフォーカスされるまでマウントされません。

これは 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-navigation リポジトリではなく、react-native-paper で問題を提起してください。

このタブナビゲーターを使用するには、@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>
  );
}

注

完全な使用ガイドについては、タブナビゲーションを参照してください。

RouteConfigs

ルート構成オブジェクトは、ルート名からルート構成へのマッピングです。

プロパティ

Tab.Navigator コンポーネントは、次のプロパティを受け入れます。

id

ナビゲーターのオプションの一意の ID。これは、navigation.getParent と共に使用して、子ナビゲーターでこのナビゲーターを参照できます。

initialRouteName

ナビゲーターの初回ロード時にレンダリングするルートの名前。

screenOptions

ナビゲーター内の画面に使用するデフォルトオプション。

backBehavior

これは、ナビゲーターで goBack が呼び出されたときに何が起こるかを制御します。これには、Android でのデバイスの戻るボタンを押すか、戻るジェスチャーが含まれます。

次の値をサポートします。

• firstRoute - ナビゲーターで定義された最初の画面に戻ります (デフォルト)
• initialRoute - initialRouteName プロパティで渡された初期画面に戻ります。渡されない場合は、デフォルトで最初の画面になります
• 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、テキストを表示する場合は 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]);

ヘルパー

タブナビゲーターは、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のドキュメントの指示に従ってください。