Expo Routerのレイアウトの仕組みを理解し、より実践的なナビゲーションを構築しよう

対象読者 モバイルアプリを作ってみたいReactエンジニア モバイルアプリのリリース作業を手軽に行いたい方 前提環境 筆者の検証環境は以下の通りです。 macOS Sequoia 15.4.1 Node.js 24.0.2 npm 11.3.0 Expo 52.0.46 React Native 0.76.9 ファイルベースルーティングとレイアウト 前回の記事は、Expo Routerのセットアップと画面遷移の最低限の基本について解説しました。今回はより実践的なアプリ開発で役立つ仕組みについて解説していきます。 今回の肝となるのは、ファイルベースルーティングの仕組みの中でも特殊な動きをする「レイアウト」の仕組みです。レイアウトは画面において「コンテンツの外枠」と呼べる、UIを定義するための仕組みです。 例えば、次のような画面があったとします（図1）。 図1：画面AからBへの遷移 画面が切り