【react-native-router-flux】React Nativeのルーティング(ナビゲーション)の実装方法を紹介

React Nativeでナビゲーションバーやアプリ内でページ遷移を実現したい場合、【react-native-router-flux】というモジュールを使って実装することができます。

今回は、React Nativeとreact-native-router-fluxを使って、iphoneアプリにナビゲーション(ルーティング)機能を実装する方法を紹介します。

react-native-router-fluxの準備

まずは、お決まり、NPMでモジュールをインポートします。(react-native init でプロジェクトを作成した前提で解説を進めます。)

react-native init プロジェクト名で作成したプロジェクトディレクトリに移動して、以下のコマンドでreact-native-router-fluxをインポートしてください。

これで、React Nativeにおけるルーティング機能を実装する準備が整いました。

Router経由でページを表示させてみる

以下のファイル構成でプロダクトを作っていきます。

  • App.js:大元になる親コンポーネント
  • Router.js:ルーティング情報を記載するファイル
  • pagesディレクトリ:この中に表示するページをいれていきます。(今回は3ページ分用意しました)

まずは、大元になる親コンポーネントApp.jsにreact-native-router-fluxを用いてRouter機能を使えるように設定を記載していきましょう。

超簡単ですね笑

Routerを読み込んで、Appコンポーネント内でレンダーしているだけです。

次にRouter.jsをみていきましょう。

これが、Router.js(ルーティング)の書き方です。まずはpageAだけ表示するRouter.jsを書いてみました。非常にシンプルじゃないですか?

  • 1〜3行目:必要なモジュールをインポート
  • 5〜13行目:Router内に「<Scene>」区切りで表示したいページを書いていく

そして、pages/pageA.jsに

適当にダミー表示用のコンポーネントを用意します。

この状態でsimulatorを立ち上げると

このように、Routerに記載したpageAコンポーネントが表示されます!

簡単に<Scene>内のオプションの説明をすると

  • key:各ページの名前(他のページからこのページにリンクしたいときに指定します)
  • component: 表示したいコンポーネント
  • title:ページの上に表示されるタイトル

となっています。

他のページへのルーティング

単一のページを表示することはできましたので、今度は、他のページへ遷移するソースを記述しましょう。

Router.jsを

このように変更して、リロードしてください。そうすると

アプリ等でよく見る、右上からのリンクや戻るボタンが出来ましたね?

これで、React Nativeのルーティング(ナビゲーション)が実装できるようになりました!

ここでは、

  • rightTitle:右上に表示する文字
  • onRight:rightTitleがクリックされたときの挙動

というオプションをSceneに追加しています。

ルーティングができるようになれば、アプリの幅が広がる

今回、紹介した、react-native-router-fluxを使って、ナビゲーション機能をアプリ内に導入できれば、アプリ制作の幅とても広がります。

是非、良いアプリを作ってください!

 

今回作ったアプリのファイル一式は以下にアップしておきましたので、よかったら、参考にしてください。

https://github.com/rara-tan/react-native-router-demo

ABOUTこの記事をかいた人

新卒ノマドエンジニアとして独立し、半年で月収100万円を達成する。フリーランスのエンジニアとして活動しながら、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んでいる。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは好きなことだけ仕事にしています。