【React Native】react-native-router-fluxによるタブ切り替えのページ遷移

React Nativeを使って、キュレーションアプリやメディアアプリによくあるタブ切り替えの実装方法を紹介します。

通常ならば、複雑な実装が必要なRoutingとタブ切り替え機能ですが、【react-native-router-flux】というライブラリを使えば数十分で実装が可能です。

react-native-router-fluxによるタブ遷移

今回はこのような形で、

  • 記事一覧
  • お知らせ
  • プロフィール
  • マイページ

という4つのページ(タブ)を持ったブログのようなデモアプリを作成します。

※ルーティングのデモアプリなんで、4ページ適当に作れば大丈夫です。

React Nativeの雛形をCLIでインストールしたら、react-native-router-fluxをインストールしてください

そして、アプリの構築ファイルを配置するsrc配下は以下のようなファイル構成になります。

  • App.js
  • Router.js(ここにルーティングをコーディングしていく)
  • screens(各ページのコンポーネント)

という構成になっています。

Router.js

メインのRouter.jsはこのようになっていて、

  • 1〜8行目:必要なライブラリや表示するComponentをimport
  • 10〜20行目:style(タブの装飾)
  • 22〜30行目:tab用のComponent
  • 32〜76行目:Router表示用のコンポーネント

という構成になっています。

32〜76行目がタブによるページ遷移の重要なポイントで、タブ遷移させたいページ(Scene)を【Tabs】タグでくくります。

そして、そのSceneのパラメーターに

  • key:各ページ固有のkey
  • component:各ページのComponent
  • title:各ページのタイトル(ヘッダー部分やタブのラベルに表示されます)
  • iconColor:アイコンの色
  • icon:タブのアイコン表示用のコンポーネント(TabBarIcon)

を設定します。

Tabsに指定されている【swipeEnabled】と【animationEnabled】は、スワイプでタブ遷移できるか・遷移する際にアニメーションするかの指定ですので、お好きなように設定してください。

たったの、これだけで、タブでページ切り替えのできるiphoneアプリとandroidアプリが作成できました!

App.js

念のため、App.jsもご紹介しておくと、

めちゃくちゃシンプル!笑

ただ、先程作成したRouter.jsを呼び出して描写しているだけです。

React Nativeを使えば、アプリ開発も手軽にできる

今まで、アプリ開発を行うためにはswiftやjavaなどのネイティブ言語を覚える必要がありました。しかし、React Nativeが登場したおかげで、javascriptしか触ったことがないフロントエンドエンジニアでもiOSアプリやAndroidアプリを手軽に開発する環境が整いつつあります。

また、今回紹介したような便利なライブラリの登場や、Facebook・Instagramといった何億人のユーザーがいるアプリがReact Nativeで作られているという実績が、更にReact Nativeでのアプリ開発の波を押し上げるでしょう。

是非、React Nativeでアプリ開発に挑戦してみてください!ここだけの話、アプリ開発者は母数が少ないので、高単価の案件も多いですよ笑

※今回作成したアプリのソース一式です。(https://github.com/rara-tan/react-native-router-demo-tab)

ABOUTこの記事をかいた人

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