Open3

React Native Expo の公式ドキュメントを読む

sikeda107sikeda107

Core concepts of file-based routing in Expo Router - Expo Documentation

最初のindex.tsxは初期ルート

  • アプリを開くと、Expo Router は URL に一致する最初のindex.tsxファイルを探します
  • ルートグループ(名前が括弧で囲まれたディレクトリ) は URL の一部としてカウントされません
    • 最初の画面をタブのグループにしたい場合は、すべてのタブページをapp/(tabs)ディレクトリ内に配置して、デフォルトのタブをindex.tsxとして定義する

ルート_layout.tsx = App.jsx/tsx

Expo Routerでは、appディレクトリはアプリのルート定義専用のため、最上位のsrcディレクトリを作成し、ルートをsrc/appディレクトリ内に配置して、ルート以外のコンポーネントをsrc/components、src/utilsなどのフォルダに配置する
Expo Routerは実際にはReact Navigationがベースなので、多くの場合、React Navigation のドキュメントを参照できる
Hello React Navigation React Navigation

sikeda107sikeda107

Expo Router notation - Expo Documentation

  • 動的ルート
    • ファイル名またはディレクトリ名に角括弧が含まれている
    • useLocalSearchParams() でアクセス
  • ルートグループ
    • 名前が括弧で囲まれたディレクトリ
    • URLに影響を与えずにルートをグループ化する
  • index.tsxファイルはディレクトリのデフォルトルート
  • + 記号 +not-found.tsx, +html.tsx, +native-intent.tsx, +middleware.ts
sikeda107sikeda107

Navigation layouts in Expo Router - Expo Documentation

https://www.youtube.com/watch?v=Yh6Qlg2CYwQ

expo-router-example/1-layouts at main · kadikraman/expo-router-example

  • スタック
    • ディレクトリ内のすべてをスタック関係に配置する場合は、 _layout.tsxファイル内でStackコンポーネントを返す
    • デフォルトでは、スタックはヘッダーに「戻る」ボタンをレンダリングする
    • 「戻る」は現在のページをスタックから削除して、ユーザーを前のページに戻す
    • Stack.Screenで画面オプションを定義
      • prop.name はルート名と一致する必要がある
  • タブ
    • レイアウトファイルにタブナビゲーターを実装すると、そのディレクトリ直下のすべてのルートがタブとして扱われる
    • Bottom Tabs Navigator React Navigation
  • スロット
    • ナビゲーターのないレイアウト
    • ページ間の移動は、新しいページをスタックにプッシュするのではなく、現在のページを単純に置き換えるだけで済むようにしたい
  • Other