【ISSUE】[React Native]React Navigationの使い方
2024年12月23日 8:40
今回はReact Navigationの基礎的な実装方法を備忘録として書いていきます。
React Navigationは、React Nativeで画面遷移やナビゲーションを管理する時に使うライブラリです。
React Navigationはこのフレームワークにおいて画面遷移とナビゲーションを実装するためのコンポーネントとAPIを提供しています。
まずは、React Navigationをインストールしていきます。
次に、App.jsxファイルに以下の記述をしてきます。
以下のように書くと、React Navigationがアプリケーションに適用されます。
画面遷移を実装していきます。
まずはStack Navigatorから紹介します。
https://reactnavigation.org/docs/stack-navigator
今回は、二つの簡単な画面を作り、ボタンで画面遷移してみましょう。
screensフォルダを作り、「HomeScreen.jsx」と「DetailScreen.jsx」を作成します。
コードの説明をしていきます。
まずは、以下のコードでcreateNativeStackNavigatorをインポートします。
次に、navigationを引数にセットします。
navigationを使うことで、画面遷移に必要な機能をコード上で使えるようにします。
そして、画面遷移するためのボタンを設置します。
ユーザーがボタンを押したときのイベントを定義するには、React NativeではonPressを使います。
onPressの中身に、引数にあるnavigationからnavigateを指定して、その引数に"Detail"(画面名)を指定します。
すると、ボタンを押すことで、Detail画面に遷移することができます。
☟
次からは、様々なNavigatorsを紹介します。
https://reactnavigation.org/docs/bottom-tab-navigator
こちらは、以下の画像のようなNavigationを実装できます。
☟
https://reactnavigation.org/docs/material-top-tab-navigator
インストールは以下のコマンドになります。
サンプルコードは以下のようになります。
すると以下のような画面になります。
アイコンは表示されていませんが、許してください...
こちらはスライドすると、ページが切り替わるTabNavigationになります。
https://reactnavigation.org/docs/material-bottom-tab-navigator
画面表示としては以下のようになります。
参考にしたドキュメントは以下になります。
https://reactnavigation.org/docs/getting-started/
他にも色々な記事を書いているので、よければ読んでいってください、、、
https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc
https://qiita.com/hukuryo/items/265c676d17fe21e75242
https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[cv:issue_marketplace_engineer]
診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。