要件定義の不安をなくす。要件定義の不安をなくす。ユニファのバックエンド分割に学ぶイノベーションメタバース開発に必要な技術の基本知識をおさらい。Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。Nativeにおける画面遷移の方法を解説します。モバイル向けのアプリはパソコン向けのアプリとは違い、1画面あたりの役割や情報量を減らして、画面遷移をたくさん行うように設計することが多くなりがちです。そのため、画面遷移ライブラリは重要な役割を担っています。Navigationを採用して、複数の画面遷移パターンについて解説していきます。検証環境は以下の通りです。5.0.5Reactと画面遷移モバイルアプリを開発していく上で、無視できない制約があります。それは画面のサイズです。スマートフォンの画面はパソコンに比べると小さいので、画面内に配置できる画面部品の量は、必然的に少なくなります。1つの画面に収まるようなコンパクトなアプリであれば、前回までの知識でも十分にUIを組み上げることができますが、少し大きなアプリになってくると、そうもいきません。ここで登場するのが「画面遷移」という概念です。ページをめくるように、現在の画面と別の画面を行き来することで、機能を複数の画面に分割します。最初はデータの一覧があり、詳細を見るほか、データを入力してから元の画面に戻ってくるといった構成にすることで、1つひとつの画面に機能を詰め込むことなく、見やすいデザインを保つことができます(図1)。図1:画面ごとに違った機能を持たせるモバイルアプリに欠かせない画面遷移ですが、実は、Reactでは画面遷移のための機能が用意されていません。画面もコンポーネントの1つでしかないので、Reactにとっては、何らかのpropsやstateに基づいて、現在の画面に該当するコンポーネントを描画しているだけのことです。Nativeでも共通の考え方です。Nativeの画面遷移ライブラリさて、Reactは画面遷移に関心がなく、そのための機能を備えていないことはわかりましたが、私たちは画面遷移に関心があります。モバイルアプリ向けの画面遷移として考えた場合、次の挙動は実現したいところです。画面名を指定して別の画面に移動できる画面をどの順で移動したか記録して、その順で戻ることができる画面を切り替えるときにアニメーションを描画できる幸い、そのためのライブラリがサードパーティで提供されています。現在(2020年時点)では、次の3つが有名です。Navigationは公式ドキュメントでもオススメされているため、基本的にはこのどちらかを選ぶことになります。SDKでの十分な開発経験を求められるため、腕に覚えがある人向けです。Navigationを採用します。Native向けの画面遷移ライブラリです。Paperとの相性が良好なのが魅力です。Navigationの具体的な使い方に入る前に、どのような画面遷移を扱えるのか、確認しておきましょう。v5は、大別して次の2種類のライブラリから成り立っています。補助ライブラリ群は、大別して3種類のナビゲーション(画面遷移)を扱います。各画面遷移の特色は次の通りです。stack:左右にスライドしながら画面を切り替えるtabs:タブを選択することで画面を切り替えるdrawer:画面端から現れるサイドメニューで画面を切り替えるどれもよく見かける画面遷移ですね。これらを1つ使って、もしくは複数組み合わせて、画面を切り替えていきます。Navigationの具体的な使い方を解説します。公式ドキュメントに沿って、ライブラリのインストールを行いましょう。コアライブラリの@react-navigation/nativeをインストールします(リスト1)。Navigationが依存している、アニメーションやジェスチャーを扱うためのライブラリをインストールします。CLIを使ってインストールします(リスト2)。CLIを利用することで、使用中のExpoバージョンと相性の良いバージョンのライブラリがインストールされます。installに読み替えてください。Nativeならindex.js)の1行目に、リスト3のimport文を記述します。'react-native-gesture-handler';最後に、NavigationContainerコンポーネントで、画面遷移したいUIを囲みます(リスト4)。Expoを使っている場合は、おそらくApp.jsに記述することになるはずです。);}前述した3種類の画面遷移は、(1)の部分をどう実装するかによって変わります。これで共通部分のセットアップは完了ですが、このままでは動かないので、早速補助ライブラリを追加しましょう。