【ReactNative】Stack Navigation(ver5.0)を使って画面遷移を実装
本記事の内容
  • 画面遷移の種類
  • 画面遷移の実装方法

について解説していきます。

1. 概要

ReactNativeでナビゲーション(画面遷移)を実装する時に使用するライブラリは、以下の3種類が挙げられます。
Stack Navigation
Tab Navigation (Bottom, Top)
Drawer Navigation

Stack Navigation
Tab Navigation

Drawer Navigation


今回は、上記の3つの中の「Stack Navigation(createStackNavigator)」を使って画面遷移を実装していきます。
本記事を読むことでこのようなアプリを作ることができます。

また、以下の記事で、他のNavigationを使った画面遷移の方法も紹介していますので、ぜひそちらもご覧ください。

Tab Navigation Drawer Navigation

2. StackNavigatorの実装
(createStackNavigator)

2.1 パッケージのインストール

まず、ターミナルで以下のコマンドを実行してパッケージをインストールします。

2.2. ソースコード

フォルダ構成
今回のプログラムのフォルダ構成は、以下になっています。

App.js

  • @react-navigation/stackをインポートする
  • Stack.Screenに画面遷移でさせるスクリーンを設定する。
  • ヘッダーやスクリーンに関する設定を行う。
<Stack.Navigatorコンポーネント>について解説
Stack.Navigatorコンポーネントのプロパティ
initialRouteName ナビゲーターのデフォルト画面を設定します。
headerMode ヘッダーを非表示にすることができる。自身でヘッダーを用意すると言う方は、これにfalseを設定する。
screenOptions ヘッダーのカスタマイズする時に使う
screenOptions
headerStyle ヘッダーの高さ、背景色を設定
headerTitleStyle ヘッダーのタイトル色
headerTintColor 戻るボタンの色
headerBackTitle 戻るボタンで使用されるタイトル文字列
headerBackTitleVisible falseを設定で戻るボタンのタイトルを非表示
<Stack.Screenコンポーネント>について解説
Stack.Screenコンポーネントのプロパティ
name, component コンポーネント名
options オプションを設定。アニメーションやヘッダーの設定が可能。
options
gestureEnabled ジェスチャーを使用して画面を閉じることができるかどうか。falseを設定することで、スワイプで画面遷移をできなくすることができる。
headerTitle(または、title) ヘッダーのタイトル
headerTransparent ぼかしビューをレンダリングし、半透明のヘッダーを作成できます

全スクリーンに共通のオプションを設定したい時は、「Stack.Navigatorコンポーネント」に、特定のスクリーンにオプションを設定したい時は、「Stack.Screenコンポーネント」のoptionsに設定する。

また、もっと細かく設定したいと言う方は、下記のドキュメントを参照してください。
公式ドキュメント: createStackNavigator

component/HomeScreen.js

  • デフォルト画面
  • SecondScreenに画面遷移するボタンを配置しています。

component/SecondScreen.js

  • HomeScreenに戻るボタンを配置しています。
    HomeScreenに戻る方法として、2パターンあります。
    • this.props.navigation.navigate(‘HomeScreen’)
    • 画面遷移したいページを指定する
    • this.props.navigation.goBack()
    • goBack()を使って一つ前のページに戻る

3. 参考

公式ドキュメント: createStackNavigator

4. まとめ

今回「React Navigation」の”ver5.0″を紹介しました。他のバージョン(ver4.0)とは、ソースコードの書き方が異なります。特に最新verを使わないといけないと言う理由は、ないと思うので使いやすいバージョンを使ってください。
個人的には、ver4.0の方が実装しやすい感じは、ありました(^^)