概要

Top・Contactができたので、tabを設置してtabでTopとContactを行き来できるようにします。

完成イメージ

インストール

react-navigationというライブラリーを使って実装するのでインストールします。
react-navigationとそれに依存するライブラリも一緒にインストールします。

expo install react-native-screens react-native-safe-area-context @react-navigation/bottom-tabs @react-navigation/native

タブバー実装

App.jsにタブバーを実装していきます。
一旦、オプションやスタイルを気にせず、最小限のタブを実装するパーツだけを記述してみます。

キーワード	内容
NavigationContainer	遷移の構成や状態など管理するコンポーネント。画面のコンポーネントは全て NavigationContainerの中に記述する
createBottomTabNavigator	タブバーをレンダリングするナビゲーター

App.js

  import React from "react";
+ import { NavigationContainer } from "@react-navigation/native";
+ import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

  import Top from "./src/screens/Top";
  import Contact from "./src/screens/Contact";

+ const Tab = createBottomTabNavigator();

  export default function App() {
    return (
-     <Contact />
+     <NavigationContainer>
+       <Tab.Navigator>
+         <Tab.Screen
+           name="Top"
+           component={Top}
+         />
+         <Tab.Screen
+           name="Contact"
+           component={Contact}
+         />
+       </Tab.Navigator>
+     </NavigationContainer>
    );
  }

コピペ用

<NavigationContainer>
  <Tab.Navigator>
    <Tab.Screen
      name="Top"
      component={Top}
    />
    <Tab.Screen
      name="Contact"
      component={Contact}
    />
  </Tab.Navigator>
</NavigationContainer>

確認すると、一旦こんな様子です。

オプションを追加していく

アイコン

それぞれのアイコンをつけていきます。

App.js

  import React from "react";
  import { NavigationContainer } from "@react-navigation/native";
  import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+ import { MaterialCommunityIcons } from "@expo/vector-icons";

  import Home from "./src/screens/Home";
  import Contact from "./src/screens/Contact";

  const Tab = createBottomTabNavigator();

  export default function App() {
    return (
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen
            name="Home"
            component={Home}
+           options={{
+             title: "TOP",
+             tabBarIcon: ({ color, size }) => (
+               <MaterialCommunityIcons name="home" color={color} size={size} />
+             ),
+           }}
          />

          <Tab.Screen
            name="Contact"
            component={Contact}
+           options={{
+             title: "お問合せ",
+             tabBarIcon: ({ color, size }) => (
+               <MaterialCommunityIcons name="information" color={color} size={size} />
+             ),
+           }}
          />
        </Tab.Navigator>
      </NavigationContainer>
    );
  }

コピペ用

<Tab.Screen
  name="Top"
  component={Top}
  options={{
    title: "TOP",
    tabBarIcon: ({ color, size }) => (
      <MaterialCommunityIcons name="home" color={color} size={size} />
    ),
  }}
/>

<Tab.Screen
  name="Contact"
  component={Contact}
  options={{
    title: "お問合せ",
    tabBarIcon: ({ color, size }) => (
      <MaterialCommunityIcons name="information" color={color} size={size} />
    ),
  }}
/>

保存して確認します。

タブバーとヘッダーのスタイル

キーワード	内容
headerStyle	ヘッダーのスタイルを記述する部分
headerTintColor	ヘッダーのタイトルの色
headerTitleStyle	ヘッダータイトルのスタイルを記述する部分
tabBarStyle	下方のタブのスタイルを記述する部分
tabBarInactiveTintColor	タブバーアイコンの色
tabBarActiveTintColor	タブバーのアクティブ（表示されている方）の色

App.js

  <NavigationContainer>
    <Tab.Navigator
+     screenOptions={{
+       headerStyle: {
+         backgroundColor: "#666",
+       },
+       headerTintColor: "#fff",
+       headerTitleStyle: {
+         fontWeight: "bold",
+       },
+       tabBarStyle: {
+         backgroundColor: "#666",
+       },
+       tabBarInactiveTintColor: "#ffffff88",
+       tabBarActiveTintColor: "#fff",
+     }}
      >
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          title: "Welcome",
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Contact"
        component={Contact}
        options={{
          title: "About",
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="information" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  </NavigationContainer>

コピペ用

<Tab.Navigator
    screenOptions={{
      headerStyle: {
        backgroundColor: "#666",
      },
      headerTintColor: "#fff",
      headerTitleStyle: {
        fontWeight: "bold",
      },
      tabBarStyle: {
        backgroundColor: "#666",
      },
      tabBarInactiveTintColor: "#ffffff88",
      tabBarActiveTintColor: "#fff",
    }}
>

これで確認してみます。

iOS

Android

これでナビゲーションのタブバーが完成しました。

最終的なコード

App.js

App.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { MaterialCommunityIcons } from "@expo/vector-icons";

import Top from "./src/screens/Top";
import Contact from "./src/screens/Contact";

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={{
          headerStyle: {
            backgroundColor: "#666",
          },
          headerTintColor: "#fff",
          headerTitleStyle: {
            fontWeight: "bold",
          },
          tabBarStyle: {
            backgroundColor: "#666",
          },
          tabBarInactiveTintColor: "#ffffff88",
          tabBarActiveTintColor: "#fff",
        }}
      >
        <Tab.Screen
          name="Top"
          component={Top}
          options={{
            title: "TOP",
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name="home" color={color} size={size} />
            ),
          }}
        />

        <Tab.Screen
          name="Contact"
          component={Contact}
          options={{
            title: "お問合せ",
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name="information" color={color} size={size} />
            ),
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

完成したら、iOS/Androidそれぞれでビルドを実行していくことができますが、環境ごとに証明書の設定やビルドの種類の選択など複雑になります。
実行してみたい場合はExpo公式サイトのドキュメントに詳しい方法が書いてありますので確認してください。

関連コンテンツ