Zenn
📱

Expo Router で画面遷移#2

に公開
React Native
TypeScript
Expo Go
Expo Router
tech

はじめに

この「でぶろぐ」について
初心者エンジニアが四苦八苦しながら個人開発していく過程をつらつら書きます。
備忘録のようなものです。。。
 

開発環境

フロントエンド

  • Node.jsとnpm
  • React Native
  • Expo Go
  • TypeScript

バックエンド

  • Google Firebase
     

チャットアプリ開発#2 ～Expo Router 編～

Expo Router のインストールと設定

  1. Expo Routerと関連ライブラリのインストール
npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar

自分が開発するチャットアプリでは、ルーティング（画面遷移）にexpo-routerを利用。
必要となる依存ライブラリも同時にインストール。
react-navigationなるものもあるらしい。
 

  1. エントリーポイントの設定
package.json
-   "main": "index.ts",
+   "main": "expo-router/entry",

mainの値をデフォルトのindex.tsからexpo-router/entryに変更。
 

  1. schamaプロパティを追加してアプリケーションの名前を設定
app.json
    "name": "Chat-Mobile-App",
    "slug": "Chat-Mobile-App",
>   "scheme": "Chat-Mobile-App",
    "version": "1.0.0",

自分はname、slugと同じ名前した。
 

ファイルベースルーティングの構造の考案

悩んだ末、一旦この構造で進めていくことにした。

app：Expo Routerのルートとなるディレクトリ
(app)、(auth)：ユーザーがログインしていたら(app)、そうでないなら(auth)に遷移。
 

app/_layout.tsx について

app/_layout.tsxでユーザーの認証状態に応じて表示するグループを(app)と(auth)で切り替え。
ユーザーの認証状態を取得するコードはまだだが、仮置きした。
ここのコードが一番手間取った。結論から言うと以下のようにした。

app/_layout.tsx
import React from "react";
import { Stack } from "expo-router";

export default function RootLayout() {
    const user = true; // ユーザーの認証状態の取得（未完成、仮設置）

    return (
        <Stack>
            <Stack.Protected guard={user}>
                <Stack.Screen name="(app)" />
            </Stack.Protected>

            <Stack.Protected guard={!user}>
                <Stack.Screen name="(auth)" />
            </Stack.Protected>
        </Stack>
    )
}

一日考えて調べてようやくたどり着いた（泣）。
公式ドキュメントをもっとしっかり読むべきだった。
 
はじめは、オプショナルチェーン?.を使った書き方をしていた。
おそらくこれが一番の原因。
 

起動確認


ユーザーがログイン済みuser = true

ユーザーがログイン未だuser = false
きちんとuserの値によって切り替えられている。
 

おわりに

同じ問題に何時間も取り組んでいると全然楽しくない。
もう挫折するところだった。危ない危ない。
次は、Firebase Authentication でユーザー認証の実装頑張る。
 

参考

https://reffect.co.jp/react/expo-router
https://docs.expo.dev/router/advanced/authentication/
 

Discussion