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

0

2024年12月23日 8:40

はじめに

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

React Navigationとは

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

React Navigatinoを始める

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

img

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

画面遷移を実装

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

https://reactnavigation.org/docs/stack-navigator

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

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

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

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

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

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

Bottom Tabs Navigator

https://reactnavigation.org/docs/bottom-tab-navigator

こちらは、以下の画像のようなNavigationを実装できます。

スクリーンショット 2023-10-20 19.02.37.png

img

Material Bottom Tabs Navigator

https://reactnavigation.org/docs/material-top-tab-navigator

インストールは以下のコマンドになります。
img
サンプルコードは以下のようになります。

img

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

Material Top Tabs Navigator

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

https://reactnavigation.org/docs/material-bottom-tab-navigator

img

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

参考

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

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]

0

診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。