ReactNativeのStackNavigatorとTabNavigatorとDrawerNavigatorを組み合わせる方法

2020 8/16

2018.07.27 2020.08.16

スマートフォンでページネーションを作成するライブラリの1つとしてReact Navigationがあります。
React Navigationを利用することで、ページ遷移を行うStackNavigator、タブで遷移する方法としてTabNavigator、Sidebarを表示する方法としてDrawerNavigatorがあります。

これら、それぞれの使い方についてまとめられたものはありますが、TabNavigatorとStackNavigatorを組み合わせるといった方法が日本語ではあまりないように感じたので、簡単にまとめてみました。

それぞれのnavigationについて

まず、一般的なページ遷移を行う方法としてcreateStackNavigatorを使う方法があります。（関連記事： React Navigationの使い方~createStackNavigator編~）
こちらは一般的なページ遷移を行う際に利用するnavigationなので、知っている方も多いのではないでしょうか。
一方、TabNavigatorとDrawerNavigatorにはそれぞれ、createBottomTabNavigatorとcreateDrawerNavigatorを利用する方法を紹介します。
今回、これらのNavigationを組み合わせるには下記イメージのようにStackNavigatorのコンポーネントの上にTabNavigatorを被せ、そのさらに上にDrawerNavigatorを作るというイメージで実装すれば実現できそうです。

では、こちらの図のように実装するにはどうすれば良いか実際に見ていきましょう。

事前準備

説明不要かもしれませんが、React Navigationを利用する方法は、アプリを作成してReact Navigationのライブラリを読み込むだけなので簡単ですね！

create-react-native-app navigationTest
cd navigationTest
npm install --save react-navigation

たったこれだけで基本的な準備は完了です。ページネーションを実装するためにNavigationのスクリーンを下記の構造で保存することとします。

上記のようにファイルの作成を行っておきましょう。

mkdir src
cd src
touch Drawer.js Tab.js Main.js Detail.js

あと今回は、Drawerを表示させるためのアイコンとしてハンバーガーメニューのアイコン（hamburger_icon.png）をsrc直下に設置しているものとします。

実際のソースコード

では、実際のソースコードを下記に記載します。読み込みの流れとしては、App.js → Drawer.js → Tab.js → Detail.js になります。

App.js

import Drawer from "./src/Drawer";
export default Drawer;

Drawer.js

import Tab from './Tab';
import { createDrawerNavigator } from 'react-navigation';
 
export default createDrawerNavigator({
  DrawerItem1: {
      screen: Tab,
      navigationOptions: {
          drawerLabel: "Drawer Item 1"
      },
  }
});

Tab.js

import { createBottomTabNavigator } from "react-navigation-tabs";
import Main from "./Main";
 
export default createBottomTabNavigator({
  TabItem1: {
    screen: Main,
    navigationOptions: {
      tabBarLabel: "Tab Item"
    }
  }
});

Main.js

import React from 'react';
import { Button, TouchableOpacity, Image } from 'react-native';
import { createStackNavigator } from 'react-navigation';
import Detail from './Detail';
 
class Main extends React.Component {
  render() {
    return (
      <Button 
        title="go Detail Screen"
        onPress={() => this.props.navigation.navigate("DetailScreen")}
      />
    );
  }
}
 
export default createStackNavigator({
  MainScreen: {
    screen: Main,
    navigationOptions: ({ navigation }) => ({
      headerLeft: (
        <TouchableOpacity onPress={() => navigation.openDrawer()}>
          <Image 
            source={require('./hamburger_icon.png')} 
            style={{ width: 30, height: 30}}
          />
        </TouchableOpacity>
      )
    })
  },
  DetailScreen: {
    screen: Detail
  }
});

Detail.js

import React from 'react';
import {  Text } from 'react-native';
 
export default class Detail extends React.Component {
  render() {
    return (
      <Text>Detail Screen</Text>
    );
  }
}

今回は、できるだけ完結にするためTabNavigatorにアイコンをつけていませんが、基本的にはつけるといいですね。