2018年6月19日

プログラミング

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

目次

  1. はじめに
  2. React Navigationの導入
  3. タブナビゲーションを実装してみる
  4. まとめ

はじめに

今回はアプリでよく見かける、画面下部のタブナビゲーションを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';

コード前半の以下の部分で、今回切り替えられる画面である HomeScreenDetailScreen の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のタブナビゲーションのカスタマイズをする方法をご紹介します!自分で制作しているアプリのデザインに合うように、タブナビゲーションの見た目をカスタマイズしましょう!

3

1

AUTHOR

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP