React Navigationで画面遷移を実現する

基礎からはじめるReact Native入門 第9回

　今回はReact Nativeにおける画面遷移の方法を解説します。モバイル向けのアプリはパソコン向けのアプリとは違い、1画面あたりの役割や情報量を減らして、画面遷移をたくさん行うように設計することが多くなりがちです。そのため、画面遷移ライブラリは重要な役割を担っています。サードパーティの画面遷移ライブラリで人気のものはいくつかありますが、今回はReact Navigationを採用して、複数の画面遷移パターンについて解説していきます。

対象読者

• JavaScriptとWeb開発の基礎に理解がある方
• Reactを用いたJavaScriptアプリケーション開発の未経験者

前提環境

　筆者の検証環境は以下の通りです。

• macOS Catalina 10.15
• Node.js 12.4.0／npm 6.9.0
• expo-cli 3.11.9
• expo 36.0.0（React Native 0.61）
• React 16.9.0
• React Navigation 5.0.5

Reactと画面遷移

　モバイルアプリを開発していく上で、無視できない制約があります。それは画面のサイズです。スマートフォンの画面はパソコンに比べると小さいので、画面内に配置できる画面部品の量は、必然的に少なくなります。1つの画面に収まるようなコンパクトなアプリであれば、前回までの知識でも十分にUIを組み上げることができますが、少し大きなアプリになってくると、そうもいきません。

　ここで登場するのが「画面遷移」という概念です。ページをめくるように、現在の画面と別の画面を行き来することで、機能を複数の画面に分割します。最初はデータの一覧があり、詳細を見るほか、データを入力してから元の画面に戻ってくるといった構成にすることで、1つひとつの画面に機能を詰め込むことなく、見やすいデザインを保つことができます（図1）。

図1：画面ごとに違った機能を持たせる

　モバイルアプリに欠かせない画面遷移ですが、実は、Reactでは画面遷移のための機能が用意されていません。画面もコンポーネントの1つでしかないので、Reactにとっては、何らかのpropsやstateに基づいて、現在の画面に該当するコンポーネントを描画しているだけのことです。これは、React DOMでもReact Nativeでも共通の考え方です。

React Nativeの画面遷移ライブラリ

　さて、Reactは画面遷移に関心がなく、そのための機能を備えていないことはわかりましたが、私たちは画面遷移に関心があります。特に、モバイルアプリ向けの画面遷移として考えた場合、次の挙動は実現したいところです。

• 画面名を指定して別の画面に移動できる
• 画面をどの順で移動したか記録して、その順で戻ることができる
• 画面を切り替えるときにアニメーションを描画できる

　幸い、そのためのライブラリがサードパーティで提供されています。現在（2020年時点）では、次の3つが有名です。

• React Navigation
• React Native Navigation
• React Router Native

　特に、React NavigationとReact Native Navigationは公式ドキュメントでもオススメされているため、基本的にはこのどちらかを選ぶことになります。

　WIX社がメンテナンスしているReact Native Navigationは、AndroidやiOSの本来の画面遷移機構を生かした画面遷移を行うことが魅力ですが、うまく扱うにはAndroid SDKやiOS SDKでの十分な開発経験を求められるため、腕に覚えがある人向けです。そのため、本記事ではJavaScriptの経験のみでも運用可能なReact Navigationを採用します。

React Navigation

　React Navigationは、ExpoチームとSoftware Mansion社が共同で出資して開発している、React Native向けの画面遷移ライブラリです。

図2：React Navigationのウェブサイト

　React Native Paperの開発メンバーも積極的に開発に参加しており、React Native Paperとの相性が良好なのが魅力です。

React Navigationの3つの遷移

　React Navigationの具体的な使い方に入る前に、どのような画面遷移を扱えるのか、確認しておきましょう。本稿執筆時点での最新バージョンであるReact Navigation v5は、大別して次の2種類のライブラリから成り立っています。

• コンポーネント切り替え機能を持つコアライブラリ
• 画面遷移のUIやアニメーションを担当する補助ライブラリ群

　補助ライブラリ群は、大別して3種類のナビゲーション（画面遷移）を扱います。

図3：補助ライブラリが扱う画面遷移の種類

　各画面遷移の特色は次の通りです。

• stack：左右にスライドしながら画面を切り替える
• tabs：タブを選択することで画面を切り替える
• drawer：画面端から現れるサイドメニューで画面を切り替える

　どれもよく見かける画面遷移ですね。これらを1つ使って、もしくは複数組み合わせて、画面を切り替えていきます。

セットアップ

　それでは、React Navigationの具体的な使い方を解説します。まずは公式ドキュメントに沿って、ライブラリのインストールを行いましょう。

　まずはコアライブラリの@react-navigation/nativeをインストールします（リスト1）。

［リスト1］コアライブラリをインストールする

$ npm install @react-navigation/native

　続いて、React Navigationが依存している、アニメーションやジェスチャーを扱うためのライブラリをインストールします。Expoから使う場合は、Expo CLIを使ってインストールします（リスト2）。

［リスト2］依存ライブラリをインストール

$ expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

　Expo CLIを利用することで、使用中のExpoバージョンと相性の良いバージョンのライブラリがインストールされます。React Native CLIを使っている場合は、expo installをnpm installに読み替えてください。

　インストールが終わったら、アプリのエントリーポイントになってるJavaScriptファイル（ExpoならApp.js、素のReact Nativeならindex.js）の1行目に、リスト3のimport文を記述します。

［リスト3］App.js

import 'react-native-gesture-handler';

　最後に、NavigationContainerコンポーネントで、画面遷移したいUIを囲みます（リスト4）。Expoを使っている場合は、おそらくApp.jsに記述することになるはずです。

［リスト4］App.js

import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>
      {/* (1) 画面遷移対象のアプリケーションコード */}
    </NavigationContainer>
  );
}

　前述した3種類の画面遷移は、（1）の部分をどう実装するかによって変わります。これで共通部分のセットアップは完了ですが、このままでは動かないので、早速補助ライブラリを追加しましょう。