今日から毎日ReactNativeを学ぶことにした(5日目)
コード書くならなぜQiitaにしなかったのだろうと思った。まあ、しばらくレベルの低い内容が続くし、あっちだとすぐバレるから結果noteでよかったか
前回
本日
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()メソッドで取得できる。
本日のまとめ
web系フレームワークだとルータ定義ファイルがよくあるけどそういうのないのかな。具体的に書いたわけではないけどアプリは自前で定数定義ファイルみたいなのを作ってる印象。そのうち出てくるか?