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に読み込むのは。SampleかSample2のどちらか一方でいい。

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

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にオプションを追加する。

スタイルの変更

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

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