マテリアルトップタブナビゲーター
画面上部に配置されたマテリアルデザインのテーマのタブバーで、タブをタップするか水平方向にスワイプすることで、異なるルートを切り替えることができます。トランジションはデフォルトでアニメーション化されます。各ルートの画面コンポーネントはすぐにマウントされます。
これはreact-native-tab-viewをラップしたものです。React Navigationとの統合なしにタブビューを使用したい場合は、代わりにライブラリを直接使用してください。
インストール
このナビゲーターを使用するには、@react-navigation/nativeとその依存関係（このガイドに従ってください）がインストールされていることを確認し、@react-navigation/material-top-tabsをインストールしてください。
- npm
- Yarn
- pnpm
npm install @react-navigation/material-top-tabs react-native-tab-view
yarn add @react-navigation/material-top-tabs react-native-tab-view
pnpm add @react-navigation/material-top-tabs react-native-tab-view
次に、ナビゲーターに必要なreact-native-pager-viewをインストールする必要があります。
Expoマネージドプロジェクトをお持ちの場合は、プロジェクトディレクトリで次を実行します
npx expo install react-native-pager-view
ベアReact Nativeプロジェクトをお持ちの場合は、プロジェクトディレクトリで次を実行します
- npm
- Yarn
- pnpm
npm install react-native-pager-view
yarn add react-native-pager-view
pnpm add react-native-pager-view
MacでiOS向けに開発している場合は、リンクを完了するために、Pod（Cocoapods経由）もインストールする必要があります。
npx pod-install ios
API定義
このタブナビゲーターを使用するには、@react-navigation/material-top-tabsからインポートします
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>
);
}
完全な使用ガイドについては、タブナビゲーションをご覧ください。
プロパティ
Tab.Navigatorコンポーネントは、次のプロパティを受け入れます。
id
ナビゲーターのオプションの一意なID。これは、navigation.getParentでこのナビゲーターを子ナビゲーターで参照するために使用できます。
initialRouteName
ナビゲーターの初回ロード時にレンダリングするルートの名前。
screenOptions
ナビゲーターの画面で使用するデフォルトのオプション。
backBehavior
これは、ナビゲーターでgoBackが呼び出されたときの動作を制御します。これには、Androidでのデバイスの戻るボタンまたは戻るジェスチャーを押すことが含まれます。
次の値をサポートしています。
firstRoute- ナビゲーターで定義された最初の画面に戻ります（デフォルト）。initialRoute-initialRouteNameプロパティで渡された最初の画面に戻ります。渡されない場合は、最初の画面がデフォルトになります。order- フォーカスされた画面の前に定義された画面に戻ります。history- ナビゲーターで最後に訪問した画面に戻ります。同じ画面に複数回訪問した場合、古いエントリは履歴から削除されます。none- 戻るボタンを処理しません。
tabBarPosition
タブビューでのタブバーの位置。使用可能な値は'top'と'bottom'です。デフォルトは'top'です。
keyboardDismissMode
ドラッグジェスチャーに応じてキーボードが非表示になるかどうかを示す文字列。使用可能な値は次のとおりです。
'auto'（デフォルト）：インデックスが変更されると、キーボードが非表示になります。'on-drag'：ドラッグが開始されると、キーボードが非表示になります。'none'：ドラッグではキーボードが非表示になりません。
initialLayout
画面の初期高さと幅を含むオブジェクト。これを渡すと、初期レンダリングのパフォーマンスが向上します。ほとんどのアプリでは、これが良いデフォルトです。
{
width: Dimensions.get('window').width;
}
sceneContainerStyle
各画面をラップするビューに適用するスタイル。これを渡して、オーバーフロークリッピングなどのデフォルトのスタイルを上書きできます。
style
タブビューコンテナに適用するスタイル。
tabBar
タブバーとして表示するReact要素を返す関数。
例
import { Animated, View, TouchableOpacity } from 'react-native';
function MyTabBar({ state, descriptors, navigation, position }) {
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,
});
};
const inputRange = state.routes.map((_, i) => i);
const opacity = position.interpolate({
inputRange,
outputRange: inputRange.map(i => (i === index ? 1 : 0)),
});
return (
<TouchableOpacity
accessibilityRole="button"
accessibilityState={isFocused ? { selected: true } : {}}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={options.tabBarTestID}
onPress={onPress}
onLongPress={onLongPress}
style={{ flex: 1 }}
>
<Animated.Text style={{ opacity }}>
{label}
</Animated.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={{
tabBarLabelStyle: { fontSize: 12 },
tabBarItemStyle: { width: 100 },
tabBarStyle: { backgroundColor: 'powderblue' },
}}
>
{/* ... */}
</Tab.Navigator>
title
headerTitleとtabBarLabelのフォールバックとして使用できる汎用タイトル。
tabBarLabel
タブバーに表示されるタブのタイトル文字列、または{ focused: boolean, color: string }を引数に取り、タブバーに表示するReact.Nodeを返す関数。未定義の場合、シーンのtitleが使用されます。非表示にするには、tabBarShowLabelオプションを参照してください。
tabBarAccessibilityLabel
タブボタンのアクセシビリティラベル。ユーザーがタブをタップすると、スクリーンリーダーによって読み上げられます。タブのラベルがない場合は、これを設定することをお勧めします。
tabBarAllowFontScaling
ラベルフォントがテキストサイズのアクセシビリティ設定を尊重してスケーリングするかどうか。
tabBarShowLabel
タブのラベルを表示するかどうか。デフォルトはtrueです。
tabBarIcon
{ focused: boolean, color: string }を引数に取り、タブバーに表示するReact.Nodeを返す関数。
tabBarShowIcon
タブアイコンを表示するかどうか。デフォルトはfalseです。
tabBarBadge
タブのバッジとして使用するReact要素を返す関数。
tabBarIndicator
タブバーインジケーターとしてReact要素を返す関数。
tabBarIndicatorStyle
タブバーインジケーターのスタイルオブジェクト。
tabBarIndicatorContainerStyle
タブバーインジケーターを含むビューのスタイルオブジェクト。
tabBarTestID
テストでこのタブボタンを特定するためのID。
tabBarActiveTintColor
アクティブなタブのアイコンとラベルの色。
tabBarInactiveTintColor
非アクティブなタブのアイコンとラベルの色。
tabBarGap
タブバーのタブアイテム間の間隔。
例
<Tab.Navigator
//...
screenOptions={{
tabBarGap: 10,
}}
></Tab.Navigator>
tabBarAndroidRipple
Androidのリップル効果をカスタマイズできます。
例
<Tab.Navigator
//...
screenOptions={{
tabBarAndroidRipple: { borderless: false },
}}
></Tab.Navigator>
tabBarPressColor
マテリアルリップルの色。
Androidでのみサポートされています。
tabBarPressOpacity
押されたタブの不透明度。
iOSでのみサポートされています。
tabBarBounces
タブバーがオーバースクロール時にバウンスするかどうかを示すブール値。
tabBarScrollEnabled
タブバーをスクロール可能にするかどうかを示すブール値。
これをtrueに設定する場合は、初期レンダリングのパフォーマンスを向上させるためにtabBarItemStyleで幅も指定する必要があります。
tabBarIconStyle
タブアイコンのコンテナのスタイルオブジェクト。
tabBarLabelStyle
タブのラベルのスタイルオブジェクト。
tabBarItemStyle
個々のタブアイテムのスタイルオブジェクト。
tabBarContentContainerStyle
タブアイテムを格納するビューのスタイルオブジェクト。
tabBarStyle
タブバーのスタイルオブジェクト。
swipeEnabled
スワイプジェスチャーを有効にするかどうかを示すブール値。スワイプジェスチャーはデフォルトで有効になっています。falseを渡すとスワイプジェスチャーは無効になりますが、ユーザーはタブバーを押すことでタブを切り替えることができます。
lazy
この画面を遅延レンダリングするかどうか。これがtrueに設定されている場合、画面はビューポートに表示される際にレンダリングされます。デフォルトでは、すべての画面がレンダリングされて、よりスムーズなスワイプエクスペリエンスが提供されます。ただし、ユーザーが表示するまでビューポート外の画面のレンダリングを延期したい場合があります。この画面の遅延レンダリングを有効にするには、lazyをtrueに設定します。
lazyを有効にすると、遅延ロードされた画面は通常、ビューポートに表示されるときにレンダリングに時間がかかります。この短い期間中にユーザーに表示される内容をカスタマイズするには、lazyPlaceholderプロパティを使用できます。
lazyPreloadDistance
lazyが有効になっている場合、このプロパティを使用して、事前にプリロードする隣接画面の数を指定できます。この値のデフォルトは0で、これは遅延ページがビューポートに表示される際にロードされることを意味します。
lazyPlaceholder
この画面がまだレンダリングされていない場合にレンダリングするReact要素を返す関数。これを機能させるには、lazyオプションも有効にする必要があります。
このビューは通常、ほんの一瞬しか表示されません。軽量に保ってください。
デフォルトでは、これはnullをレンダリングします。
イベント
ナビゲーターは、特定のアクションでイベントを発行できます。サポートされているイベントは次のとおりです。
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- string - ジャンプ先のルートの名前。params- object - 遷移先のルートに渡す画面パラメーター。
navigation.jumpTo('Profile', { name: 'Michaś' });
例
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
const Tab = createMaterialTopTabNavigator();
function MyTabs() {
return (
<Tab.Navigator
initialRouteName="Feed"
screenOptions={{
tabBarActiveTintColor: '#e91e63',
tabBarLabelStyle: { fontSize: 12 },
tabBarStyle: { backgroundColor: 'powderblue' },
}}
>
<Tab.Screen
name="Feed"
component={Feed}
options={{ tabBarLabel: 'Home' }}
/>
<Tab.Screen
name="Notifications"
component={Notifications}
options={{ tabBarLabel: 'Updates' }}
/>
<Tab.Screen
name="Profile"
component={Profile}
options={{ tabBarLabel: 'Profile' }}
/>
</Tab.Navigator>
);
}