React NativeでStackNavigatorを使用し一覧から詳細への遷移を実装する

過去にBottom Tabs Navigatorを作成したので、今回は、Stack Navigatorを導入する。 実装に期待する動きは、 - タブ移動が可能 - タブ移動後に詳細ページへの遷移が可能 上記の通りなので、Bottom Tabs NavigatorとStack Navigatorを併用する必要がある。 その前提で進めていく。 必要なパッケージをインストールする インストール後、必要なファイルを作成する。 実装していく SampleStackScreen.tsxは下記の通りになる。 上記は、SampleとSampleDetailへの遷移について書かれている。 次にこれをタブナビゲーションに適応させる。 App.tsxに のように記載する。 これでタブ移動でSampleStackScreenが開けるようになった。 そしてここには一覧ページと詳細ページへの遷移が記述されているので、まず、Sampleが開く。 Sampleは、 こんな感じにする。 そうすると、20件のカードが表示される。 そこにボタンがあり、ボタンをプレスすることでSampleDetailに遷移する。 SampleDetailは下記のように記載することで、 遷移後のページでidが表示されるようになった。