React Navigationでタブナビゲーションを作ろう！

はじめに

今回はアプリでよく見かける、画面下部のタブナビゲーションをReact Navigationを使って実装する方法をご紹介します！

Bageleeでは以前、React Navigationを使って、アプリ内のテキストをタップして画面遷移する方法をご紹介しました。
React Navigationそのものに関しては、こちらの記事で説明されているのでぜひご覧ください。

React Navigationを使ってみる【これからはじめるReact Native】

React Navigationの導入

まずはReact Navigationを導入しましょう。

$ yarn add react-navigation

もしくは

$ npm install --save react-navigation

を実行してインストールします。

タブナビゲーションを実装してみる

最初に、このようなReact Nativeデフォルト＋少し見た目をカスタマイズしたタブナビゲーションを実装していきます！
「Home」と「Detail」というタブがあって、タブを押す度に画面が切り替わります。

このように、画面下にタブナビゲーションを設置したい場合は、
React Navigationの createBottomTabNavigator コンポーネントを使用します。

App.js は以下のようなコードになります。

import React, { Component } from 'react';
import {
  Text,
  View
} from 'react-native';
import { createBottomTabNavigator} from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>HomeScreen</Text>
      </View>
    );
  }
}

class DetailScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>DetailScreen</Text>
      </View>
    );
  }
}

const RootStack = createBottomTabNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Detail: {
      screen: DetailScreen,
    },
  },
  {
    initialRouteName: 'Home',
  }
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

コードの解説

最初にタブナビゲーションを生成するために使用する createBottomTabNavigator を読み込みます。

import { createBottomTabNavigator} from 'react-navigation';

コード前半の以下の部分で、今回切り替えられる画面である HomeScreen と DetailScreen の2つのコンポーネントを生成しています。

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>HomeScreen</Text>
      </View>
    );
  }
}

class DetailScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>DetailScreen</Text>
      </View>
    );
  }
}  

この切り替えられる画面（コンポーネント）のことを、React Navigationでは「スクリーン」と呼びます。

今回は説明の都合上、 App.js 内に「Home」と「Detail」の2つのスクリーンを定義していますが、実際の開発ではスクリーンごとにコンポーネントを作成したほうがわかりやすいと思います。

const RootStack = createBottomTabNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Detail: {
      screen: DetailScreen,
    },
  },
  {
    initialRouteName: 'Home',
    tabBarOptions: {
      activeTintColor: '#ffffff',
      activeBackgroundColor: '#5ab4bd',
      inactiveBackgroundColor: '#ffffff',
      style: { borderTopWidth: 2, borderTopColor: '#5ab4bd' },
    }
  }
);

1番重要な、タブナビゲーションを生成している部分です。

まず、createBottomTabNavigator の第一引数で、スクリーン名とスクリーンコンポーネントの紐づけを行っています。
今回のコードだと、「Home」と HomeScreen、「Detail」とDetailScreenを紐づけています。

第二引数には、タブナビゲーションのオプションを指定します。
initialRouteName には、初期のルートのスクリーン名（アプリを開いたときに表示するスクリーン）を指定します。今回の場合だと、「Home」を設定しているので、開いたときにはHomeScreenが表示されるようになっています。

また、tabBarOptions でタブナビゲーションの見た目などをカスタマイズすることができます。

今回は、

• activeTintColor : アクティブなタブのラベルとアイコンの色
• activeBackgroundColor : アクティブなタブの背景色
• inactiveBackgroundColor : 非アクティブなタブの背景色
• style : タブナビゲーション自体のスタイル

の4つのオプションを使って見た目を変更してみました。

このほかにもいろいろなオプションがあるので、公式リファレンスを参考にしてみてください。

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

最後に、タブナビゲーションを定義した RootStack をApp.jsの返り値に渡してあげます。
これでアプリの下部にタブナビゲーションが表示されるようになりました！

まとめ

今回は、React Navigationを使って画面下部にタブナビゲーションを実装する方法をご紹介しました！

多くのアプリで必要になるタブナビゲーションでの画面遷移ですが、React Navigationを使うと簡単に実装できるのでオススメです！

ただ、このReact Nativeデフォルトのタブナビゲーションだと、見た目は少しカスタマイズできますが寂しい感じがしますよね。

そこで次回は、React Navigationのタブナビゲーションのカスタマイズをする方法をご紹介します！自分で制作しているアプリのデザインに合うように、タブナビゲーションの見た目をカスタマイズしましょう！