ボトムタブナビゲーター

画面下部にシンプルなタブバーを表示し、異なるルート間を簡単に切り替えられます。ルートは遅延初期化されます。つまり、スクリーンコンポーネントは最初にフォーカスされるまでマウントされません。

インストール

このナビゲーターを使用するには、@react-navigation/nativeとその依存関係（このガイドに従ってください）をインストールし、次に@react-navigation/bottom-tabsをインストールします。

npm

npm install @react-navigation/bottom-tabs

Yarn

yarn add @react-navigation/bottom-tabs

pnpm

pnpm add @react-navigation/bottom-tabs

API定義

このタブナビゲーターを使用するには、@react-navigation/bottom-tabsからインポートします。

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

const Tab = createBottomTabNavigator();

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 - 戻るボタンを処理しません。

detachInactiveScreens

非アクティブな画面をビュー階層から切り離してメモリを節約するかどうかを示すブール値。これにより、react-native-screensとの統合が可能になります。デフォルトはtrueです。

sceneContainerStyle

画面コンテンツをラップするコンポーネントのスタイルオブジェクト。

tabBar

タブバーとして表示するReact要素を返す関数。

例

import { View, Text, TouchableOpacity } from 'react-native';

function MyTabBar({ state, descriptors, navigation }) {
  return (
    <View style={{ flexDirection: 'row' }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name, route.params);
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

        return (
          <TouchableOpacity
            accessibilityRole="button"
            accessibilityState={isFocused ? { selected: true } : {}}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{ flex: 1 }}
          >
            <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
              {label}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

// ...

<Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
  {...}
</Tab.Navigator>

この例では、ラベル付きの基本的なタブバーが表示されます。

useNavigationフックは画面内でのみ使用できるため、tabBar内でuseNavigationフックを使用することは**できません**。代わりに、tabBarにはnavigationプロップが提供されます。

function MyTabBar({ navigation }) {
  return (
    <Button
      title="Go somewhere"
      onPress={() => {
        // Navigate using the `navigation` prop that you received
        navigation.navigate('SomeScreen');
      }}
    />
  );
}

オプション

以下のオプションを使用して、ナビゲーター内の画面を構成できます。これらは、Tab.navigatorのscreenOptionsプロパティまたはTab.Screenのoptionsプロパティで指定できます。

title

headerTitleとtabBarLabelのフォールバックとして使用できる一般的なタイトル。

tabBarLabel

タブバーに表示されるタブのタイトル文字列、または{ focused: boolean, color: string }を受け取ってReact.Nodeを返す関数。未定義の場合、シーンのtitleが使用されます。非表示にするには、tabBarShowLabelを参照してください。

tabBarShowLabel

タブのラベルを表示するかどうか。デフォルトはtrue。

tabBarLabelPosition

ラベルがアイコンの下に表示されるか、アイコンの横に表示されるか。

• below-icon: ラベルはアイコンの下に表示されます（iPhoneの場合が多い）
• beside-icon: ラベルはアイコンの横に表示されます（iPadの場合が多い）

デフォルトでは、デバイスの幅に基づいて位置が自動的に選択されます。

tabBarLabelStyle

タブラベルのスタイルオブジェクト。

tabBarIcon

{ focused: boolean, color: string, size: number }を受け取ってReact.Nodeを返す関数。タブバーに表示されます。

tabBarIconStyle

タブアイコンのスタイルオブジェクト。

tabBarBadge

タブアイコンのバッジに表示するテキスト。stringまたはnumberを受け入れます。

tabBarBadgeStyle

タブアイコンのバッジのスタイル。背景色やテキスト色を指定できます。

tabBarAccessibilityLabel

タブボタンのアクセシビリティラベル。ユーザーがタブをタップすると、スクリーンリーダーによって読み取られます。タブにラベルがない場合は、これを設定することをお勧めします。

tabBarTestID

テストでこのタブボタンを見つけるためのID。

tabBarButton

タブバーボタンとしてレンダリングするReact要素を返す関数。アイコンとラベルをラップします。デフォルトでPressableをレンダリングします。

ここでカスタム実装を指定できます。

tabBarButton: (props) => <TouchableOpacity {...props} />;

tabBarActiveTintColor

アクティブなタブのアイコンとラベルの色。

tabBarInactiveTintColor

非アクティブなタブのアイコンとラベルの色。

tabBarActiveBackgroundColor

アクティブなタブの背景色。

tabBarInactiveBackgroundColor

非アクティブなタブの背景色。

tabBarHideOnKeyboard

キーボードが開いているときにタブバーを非表示にするかどうか。デフォルトはfalse。

tabBarItemStyle

タブアイテムコンテナのスタイルオブジェクト。

tabBarStyle

タブバーのスタイルオブジェクト。背景色などのスタイルを設定できます。

画面をタブバーの下に表示するには、positionスタイルを絶対値に設定します。

<Tab.Navigator
  screenOptions={{
    tabBarStyle: { position: 'absolute' },
  }}
>

絶対配置されたタブバーがある場合は、コンテンツにボトムマージンを追加する必要がある場合があります。React Navigationは自動的には行いません。

ボトムタブバーの高さを取得するには、ReactのコンテキストAPIを使用してBottomTabBarHeightContextを使用するか、useBottomTabBarHeightを使用します。

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

// ...

<BottomTabBarHeightContext.Consumer>
  {tabBarHeight => (
    /* render something */
  )}
</BottomTabBarHeightContext.Consumer>

または

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

// ...

const tabBarHeight = useBottomTabBarHeight();

tabBarBackground

タブバーの背景として使用するReact要素を返す関数。画像、グラデーション、ブラービューなどをレンダリングできます。

import { BlurView } from 'expo-blur';

// ...

<Tab.Navigator
  screenOptions={{
    tabBarStyle: { position: 'absolute' },
    tabBarBackground: () => (
      <BlurView tint="light" intensity={100} style={StyleSheet.absoluteFill} />
    ),
  }}
>

BlurViewを使用する場合は、tabBarStyleでposition: 'absolute'も設定してください。また、useBottomTabBarHeight()を使用してコンテンツにボトムパディングを追加する必要があります。

lazy

この画面を最初にアクセスしたときにレンダリングするかどうか。デフォルトはtrueです。初回レンダリング時に画面をレンダリングする場合は、falseに設定します。

unmountOnBlur

画面から離れた際に、この画面をアンマウントするかどうかを指定します。画面のアンマウントは、画面内のローカル状態とネストされたナビゲーターの状態をリセットします。デフォルトはfalseです。

通常、このプロップを有効にすることは推奨しません。タブを切り替えたときに、ユーザーはナビゲーション履歴が失われることを期待していないためです。このプロップを有効にする場合は、それが実際にユーザーにとってより良いエクスペリエンスを提供するかどうかを検討してください。

freezeOnBlur

非アクティブな画面の再レンダリングを防止するかどうかを示すブール値です。デフォルトはfalseです。アプリケーションの先頭でreact-native-screensパッケージのenableFreeze()が実行されると、デフォルトはtrueになります。

react-native-screensバージョン >=3.16.0が必要です。

iOSとAndroidでのみサポートされています。

ヘッダー関連オプション

ヘッダー関連オプションの一覧はこちらをご覧ください。これらのオプションは、Tab.navigatorのプロップscreenOptionsまたはTab.Screenのプロップoptionsで指定できます。これらのオプションを使用するために、@react-navigation/elementsを直接使用する必要はありません。これらのオプションは、そのページに記載されているだけです。

それらに加えて、次のオプションもボトムタブでサポートされています。

header

デフォルトのヘッダーの代わりに使用するカスタムヘッダーです。

これは、ヘッダーとして表示するReact要素を返す関数を受け入れます。関数は、次のプロパティを含むオブジェクトを引数として受け取ります。

• navigation - 現在の画面のナビゲーションオブジェクト。
• route - 現在の画面のルートオブジェクト。
• options - 現在の画面のオプション。
• layout - 画面のサイズ。heightとwidthのプロパティを含みます。

例

import { getHeaderTitle } from '@react-navigation/elements';

// ..

header: ({ navigation, route, options }) => {
  const title = getHeaderTitle(options, route.name);

  return <MyHeader title={title} style={options.headerStyle} />;
};

ナビゲーター内のすべての画面にカスタムヘッダーを設定するには、ナビゲーターのscreenOptionsプロップでこのオプションを指定できます。

headerStyleにheightを指定する

カスタムヘッダーの高さがデフォルトのヘッダーの高さとは異なる場合、測定が非同期であるため、グリッチが発生することがあります。高さを明示的に指定することで、そのようなグリッチを防ぐことができます。

例

headerStyle: {
  height: 80, // Specify the height of your custom header
};

カスタムヘッダーのスタイルを制御するため、デフォルトではこのスタイルはヘッダーに適用されません。このスタイルをヘッダーにも適用する場合は、プロップからoptions.headerStyleを使用してください。

headerShown

画面のヘッダーを表示または非表示にするかどうかを指定します。ヘッダーはデフォルトで表示されます。これをfalseに設定すると、ヘッダーが非表示になります。

イベント

ナビゲーターは、特定のアクション時にイベントを送信できます。サポートされているイベントは次のとおりです。

tabPress

このイベントは、ユーザーがタブバーで現在の画面のタブボタンを押したときに発生します。デフォルトでは、タブの押下によりいくつかの処理が行われます。

• タブがフォーカスされていない場合、タブの押下はそのタブにフォーカスします。
• タブが既にフォーカスされている場合
  • タブの画面がスクロールビューを表示する場合、useScrollToTopを使用して、スクロールビューをトップにスクロールできます。
  • タブの画面がスタックナビゲーターを表示する場合、スタックでpopToTopアクションが実行されます。

デフォルトの動作を防止するには、event.preventDefaultを呼び出します。

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

    // Do something manually
    // ...
  });

  return unsubscribe;
}, [navigation]);

カスタムタブバーを使用する場合は、このイベントを送信するようにしてください。

tabLongPress

このイベントは、ユーザーがタブバーで現在の画面のタブボタンを長押ししたときに発生します。カスタムタブバーを使用する場合は、このイベントを送信するようにしてください。

例

React.useEffect(() => {
  const unsubscribe = navigation.addListener('tabLongPress', (e) => {
    // Do something
  });

  return unsubscribe;
}, [navigation]);

ヘルパー

タブナビゲーターは、ナビゲーションプロップに次のメソッドを追加します。

jumpTo

タブナビゲーター内の既存の画面に移動します。このメソッドは、次の引数を受け入れます。

• name - 文字列 - 移動先のルートの名前。
• params - オブジェクト - 移動先のルートに使用する画面パラメーター。

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

例

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

const Tab = createBottomTabNavigator();

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