2018年6月19日
プログラミング
React Navigationでタブナビゲーションを作ろう!


はじめに
今回はアプリでよく見かける、画面下部のタブナビゲーションをReact Navigationを使って実装する方法をご紹介します!
Bageleeでは以前、React Navigationを使って、アプリ内のテキストをタップして画面遷移する方法をご紹介しました。
React Navigationそのものに関しては、こちらの記事で説明されているのでぜひご覧ください。
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のタブナビゲーションのカスタマイズをする方法をご紹介します!自分で制作しているアプリのデザインに合うように、タブナビゲーションの見た目をカスタマイズしましょう!
この記事は
参考になりましたか?
0
0
関連記事

2018年12月6日
【React Native】キーボードで画面が隠れる場合の対処法

2018年7月13日
TypeScriptでReact Native開発をする方法2018年最新版

2018年6月29日
React Navigationのタブナビゲーションをカスタマイズしてみよう!

2018年6月19日
React Navigationでタブナビゲーションを作ろう!

2018年4月16日
ExpoのLocationで位置情報を取得する【これからはじめるReact Native】

2018年4月2日
MaskedViewIOSでマスクをかける 【これからはじめるReact Native】
eishisでは一緒に働く仲間を募集しています
正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。
運営メンバー

Eishi Saito 総務
SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。
sasakki デザイナー
アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ デザイナー
WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。
Miu マーケター
ドイツでWEBマーケティングしています。
しんのき エンジニア
新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

やまかわたかし デザイナー
フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。
furuya エンジニア
サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。
Sayaka Osanai デザイナー
Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた エンジニア
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています
うえまつゆい エンジニア
サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。