reactjs
reactnative

【React Navigation】タブとヘッダーの削除方法

概要

React NavigationはReact Nativeのナビゲーションライブラリで現在1番スター数が多いライブラリです。
今回、React Navigationの実装中に躓いたところを自分用にメモします。
本題はタイトルの通りなのですが、まずはReact Navigationの使い方を簡単にまとめます。

React Navigationドキュメントはこちら

React Navigationのインストール

npm install react-navigation
yarn add react-navigation

主要コンポーネント

主要コンポーネントは以下の2つです。

  • StackNavigator
  • TabNavigator

StackNavigator

StackNavigatorは名前の通り、各コンポーネントをStackします。

const Navigation = StackNavigator({
  Page1: { screen: Page1Component },
  Page2: { screen: Page2Component },
  Page3: { screen: Page3Component },
  Page4: { screen: Page4Component },
  });

図で表現するとこんな感じです。

スクリーンショット 2018-05-05 19.11.55.png

ポイント
  • StackNavigatorでラップされているコンポーネントはnavigation(メソッドやstateが入ったオブジェクト)というpropsが渡される
  • navigation.navigate("Page1")とすると、Page1Componentが現在のコンポーネントの上に積まれる
  • navigation.goBack()とすると、1つ前のコンポーネントへと画面遷移する
実際のコード例
// navigate()メソッドの例
<TouchableOpacity 
    onPress={() => props.navigation.navigate('Page1')}
>
    <Text>ページ1へ移動</Text>
</TouchableOpacity>

// goback()メソッドの例
<TouchableOpacity 
    onPress={() => props.navigation.goback()}
>
    <Text>1つ前の画面へ移動</Text>
</TouchableOpacity>

TabNavigator

TabNavigatorは名前の通り、Tabで各コンポーネントを表示します。

const Navigation = TabNavigator({
  Page5: { screen: Page5Component },
  Page6: { screen: Page6Component },
  Page7: { screen: Page7Component },
});
参考動画

https://gyazo.com/2be7a793fc072f497da2768a13cf1877

ポイント
  • StackNavigatorと同様、TabNavigatorでラップされているコンポーネントはnavigationというpropsが渡される
  • 画面遷移はタブをタップすることでできる
  • navigation.navigateメソッドを用いなくても画面遷移できる

本題①:タブの削除

TabNavigatorをStackNavigatorの中に入れるとタブを削除することができます。

// TabNavigatorを定義する。
const TabNavigatorComponent = TabNavigator({
  Page5: { screen: Page5Component },
  Page6: { screen: Page6Component },
  Page7: { screen: Page7Component },
});

// StackNavigatorの中にTabNavigatorを入れる
const Navigation = StackNavigator({
  Tab: { screen: TabNavigatorComponent }, //ここにTabNavigatorを入れる!!
  Page1: { screen: Page1Component },
});
参考動画

https://gyazo.com/66bb49b4d7117ed5dc29158df854388a

ポイント
  • TabNavigatorの上に他のページが積み上がるので、他のページでタブを覆い隠すことができる

本題②: ヘッダーの削除

Header部分を削除するには以下のように実装します。

Page1: { screen: Page1Component,
         {navigationOptions: () => ({
           header: null
         }), 
        },
ポイント
  • navigationOptionsにheader: nullと設定するとヘッダーを削除することができる。
  • 公式ドキュメントにはheaderMode: 'none'と設定するとヘッダーを削除することができると書いていたが、現時点では削除できないので注意。
  • title: 'タイトル'と設定すると、ヘッダー部分に文字を表示させることができる。

まとめ

React Navigationで直感的に画面遷移ができるようになりました。navigationOptionsにはもっと他の設定があるので、もっと使いこなしていきたいです。