{
  "$type": "site.standard.document",
  "canonicalUrl": "https://blog.nove-b.dev//posts/implement-stacknavigator-react-native",
  "path": "/posts/implement-stacknavigator-react-native",
  "publishedAt": "2023-10-28T00:00:00.000Z",
  "site": "at://did:plc:2atly2y5kfyjcj5zap6pv4wd/site.standard.publication/3mmxeqr2tcb2k",
  "tags": [
    "react-native",
    "stacknavigator"
  ],
  "textContent": "過去にBottom Tabs Navigatorを作成したので、今回は、Stack Navigatorを導入する。\n\n実装に期待する動きは、\n\n- タブ移動が可能\n- タブ移動後に詳細ページへの遷移が可能\n\n上記の通りなので、Bottom Tabs NavigatorとStack Navigatorを併用する必要がある。\n\nその前提で進めていく。\n\n必要なパッケージをインストールする\n\nインストール後、必要なファイルを作成する。\n\n実装していく\n\nSampleStackScreen.tsxは下記の通りになる。\n\n上記は、SampleとSampleDetailへの遷移について書かれている。\n\n次にこれをタブナビゲーションに適応させる。\n\nApp.tsxに\n\nのように記載する。\n\nこれでタブ移動でSampleStackScreenが開けるようになった。\n\nそしてここには一覧ページと詳細ページへの遷移が記述されているので、まず、Sampleが開く。\n\nSampleは、\n\nこんな感じにする。\n\nそうすると、20件のカードが表示される。\n\nそこにボタンがあり、ボタンをプレスすることでSampleDetailに遷移する。\n\nSampleDetailは下記のように記載することで、\n\n遷移後のページでidが表示されるようになった。",
  "title": "React NativeでStackNavigatorを使用し一覧から詳細への遷移を実装する"
}