【ISSUE】[React Native]React Navigationの使い方

はじめに

今回はReact Navigationの基礎的な実装方法を備忘録として書いていきます。

React Navigationは、React Nativeで画面遷移やナビゲーションを管理する時に使うライブラリです。
React Navigationはこのフレームワークにおいて画面遷移とナビゲーションを実装するためのコンポーネントとAPIを提供しています。

まずは、React Navigationをインストールしていきます。

次に、App.jsxファイルに以下の記述をしてきます。
以下のように書くと、React Navigationがアプリケーションに適用されます。

画面遷移を実装していきます。
まずはStack Navigatorから紹介します。

今回は、二つの簡単な画面を作り、ボタンで画面遷移してみましょう。
screensフォルダを作り、「HomeScreen.jsx」と「DetailScreen.jsx」を作成します。

コードの説明をしていきます。
まずは、以下のコードでcreateNativeStackNavigatorをインポートします。

次に、navigationを引数にセットします。
navigationを使うことで、画面遷移に必要な機能をコード上で使えるようにします。

そして、画面遷移するためのボタンを設置します。
ユーザーがボタンを押したときのイベントを定義するには、React NativeではonPressを使います。
onPressの中身に、引数にあるnavigationからnavigateを指定して、その引数に"Detail"(画面名)を指定します。

すると、ボタンを押すことで、Detail画面に遷移することができます。
☟

次からは、様々なNavigatorsを紹介します。

こちらは、以下の画像のようなNavigationを実装できます。
☟
スクリーンショット 2023-10-20 19.02.37.png

インストールは以下のコマンドになります。

サンプルコードは以下のようになります。

すると以下のような画面になります。
アイコンは表示されていませんが、許してください...
スクリーンショット 2023-10-20 19.20.01.png

こちらはスライドすると、ページが切り替わるTabNavigationになります。

画面表示としては以下のようになります。
スクリーンショット 2023-10-20 19.33.38.png

参考にしたドキュメントは以下になります。

他にも色々な記事を書いているので、よければ読んでいってください、、、