React Navigation

Tab Navigator

タブ形式の画面遷移定義

React Navigationでは以下の三種類のタブ切り替え方法が用意されています。

• @react-navigation/bottom-tabs
  画面下部にタブバーを表示する。
• @react-navigation/material-bottom-tabs
  bottom-tabsと同様画面下部にタブバーを表示するが切り替え時にアニメーションが行える。
  react-native-paperパッケージが提供するコンポーネントのラッパー。
• @react-navigation/material-top-tabs
  画面上部にタブバーを表示する。タブをタップする以外に画面をスワイプすることでも切り替えが行える。
  react-native-tab-viewパッケージが提供するコンポーネントのラッパー。

タブを使う場合の画面定義の方法はスタック形式での定義方法とほぼ同じです。

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

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

タブバーにアイコンを表示するにはoptionsプロパティでtabBarIconを指定します。また、タブバーに表示される文字列はtitleで指定します。

        <Tab.Screen name="Home" component={HomeScreen}
          options={{
            title: 'ホーム',
            // tabBarIconには「アイコンとして表示するReact要素を返す関数」を指定する
            tabBarIcon: ({color, size}) => (
              <Ionicons name="ios-home" color={color} size={size} />
            )
          }}
        />

上の例で使っているIoniconsは@expo/vector-iconsパッケージ（デフォルトでインストールされています）で提供されているコンポーネントです。@expo/vector-iconsは他にもフリーのアイコン集が収録されています。アイコンは以下のURLで検索することができます。
https://icons.expo.fyi/