今日から毎日ReactNativeを学ぶことにした（5日目）

コード書くならなぜQiitaにしなかったのだろうと思った。まあ、しばらくレベルの低い内容が続くし、あっちだとすぐバレるから結果noteでよかったか

前回

本日

Dynamic routes

Dynamic routes

app
├── (tabs)
│   ├── (home)
│   │   ├── details
│   │   │   └── [id].tsx
│   │   ├── _layout.tsx
│   │   └── index.tsx
│   ├── _layout.tsx
│   └── settings.tsx
└── _layout.tsx

詳細ページとか動的なルートを作っていく。この時はディレクトリを切って、ファイル名は[]でくくるようです。

// app/(tabs)/(home)/index.tsx

<Link href="/details/1">View first user details</Link>
<Link href="/details/2">View second user details</Link>
<Link
  href={{
    pathname: '/details/[id]',
    params: { id: 'bacon' },
  }}>
  View user details
</Link>

パスをhrefに直接指定することもできるし、オブジェクト形式で渡すこともできる。アプリをしっかり作り込んでいくと後者が主流になるんだろうな

// app/(tabs)/(home)/details/[id].tsx

import { useLocalSearchParams } from 'expo-router';
const { id } = useLocalSearchParams();

クエリパラメータはexpo-routerのuseLocalSearchParams()メソッドで取得できる。

app/(tabs)/(home)/index.tsx

app/(tabs)/(home)/details/[id].tsx

本日のまとめ

web系フレームワークだとルータ定義ファイルがよくあるけどそういうのないのかな。具体的に書いたわけではないけどアプリは自前で定数定義ファイルみたいなのを作ってる印象。そのうち出てくるか？