React NativeでBottom Tabs Navigatorを使用しタブナビゲーションを実装する

目次

スマホアプリでよく見るボトムメニューをReact Nativeで導入するには、Bottom Tabs Navigatorというパッケージをインストールする必要がある。

ちなみにナビゲーションには他にもStack Navigatorというものもあり、こちらは一覧画面から詳細画面への遷移等に用いられるらしい。

詳細は↓に引用した。

StackNavigator

StackNavigatorは主にはアプリにおける「一覧画面」と「詳細画面」のような関係性がある画面間の遷移の用いられます。特徴として画面が手前に積み重なっていくような挙動をし、iOSの右スワイプ(画面の左端を掴んで右にスワイプ)やAndroidの戻るボタンで1つ前の画面に戻ることができます。

【RN】StackとBottomTabNavigatorを組み合わせたサンプル

BottomTabNavigator

アプリにおいて機能がいくつかのカテゴリに分かれている場合にBottomTabNavigatorは用いられます。TwitterやFacebookやInstagramなど、多機能なアプリは大概このBottomTabNavigatorで画面制御を行っています。

【RN】StackとBottomTabNavigatorを組み合わせたサンプル

実践していく

まずは移動するページが欲しいので、

mkdir src
mkdir src/screens
touch src/screens/Sample.tsx

適当に作成する。

Sample.tsx

import React from "react";
import { ScrollView, View, Text } from "react-native";
const Sample = () => {
    return (
        <ScrollView>
            <View>
                <Text>Sample</Text>
            </View>
        </ScrollView>
    )
}

export default Sample;

こんな感じになる。

ちなみに、divに相当するものがViewコンポーネントで、pタグに相当するのがTextコンポーネント。そしてScrollViewはコンテンツをスクロールできるようにするもの。

作成したページをApp.tsxで読み込む。

import Sample from './src/screens/Sample'

export default function App() {
  return (
    <Sample />
  )
}

同様にSample2とかを作成する。

ただこの時点でApp.tsxに読み込むのは。SampleSample2のどちらか一方でいい。

必要なパッケージをインストールする

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

上記インストール後にApp.tsxを下記のように変更する。

import { NavigationContainer } from '@react-navigation/native'
import Sample from './src/screens/Sample'
import Sample2 from './src/screens/Sample2';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

export default function App() {
  return (

    <Tab.Navigator>
      <Tab.Screen
      name="Sample"
      component={Sample}
      />
      <Tab.Screen
      name="Sample2"
      component={Sample2}
      />
    </Tab.Navigator>

  )
}

これでタブは完成した。

実機で確認することでページ遷移していることを確認できる。

カスタマイズの例

アイコンの付与

タブにアイコンを付与するには、

import { iconType } from "@expo/vector-icons";でアイコンをインストールし、

<Tab.Screen
  name="FromGift"
  component={FromGift}
  options={{
    title: "Give",
    tabBarIcon: ({ color, size }) => (
      <SimpleLineIcons name="present" color={color} size={size} />
    ),
  }}
/>

Tabにオプションを追加する。

スタイルの変更

<html>
<body>
<!–StartFragment–>

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

<!–EndFragment–>
</body>
</html>

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

こんな感じでスタイルも変更できる。

次に読むおすすめ記事

React NativeでHello World(環境構築~サンプルアプリ立ち上げまで)

react native でアプリを作る環境構築をやってみるよ⚡

React Nativeにコードフォーマッター(ESLint・Prettierを導入する)

React NativeでTailwind CSSを使用したいので、nativewindを導入した

react native でサンプルアプリを立ち上げる🔭

この記事に対するコメント

お気軽にコメントを下さい

メールアドレスが公開されることはありません。 が付いている欄は必須項目です