Fresopiya
場所にもお金にも時間にも、何にも縛られない自由な状態になったら一体人間は何をしてどこに向かうのか。

まずはとにかく自由を目指すエンジニアのブログです。
「哲学」と「プログラミング」と「政治経済」、「ブログ」がメインになるかと。
React Native

【React Native】スタック(Stack) & タブ(Tab)ナビゲーションの実装

どうも、とがみんです。

以前の記事で、React Navigationを用いた、スタック(stack)、タブ(tab)、ドロワー(drawer)ナビゲーションの実装方法についてまとめてきました。

この記事では、スタックナビゲーションとタブナビゲーションんの両方を実装する方法についてまとめていきます。

今回作成するもの

今回作成するものは、以下のようなスタックナビゲーションタブナビゲーションの両方を実装したものです。

構造としては、各タブに、スタックナビゲーションが入れ子になっているような構造です。

・Tab1(Tab.Screen)
・・HomeStackScreen(Stack.Navigator)
・・・HomeScreen(Stack.Screen)
・・・DetailScreen(Stack.Screen)
・Tab2(Tab.Screen)
・・Home2StackScreen(Stack.Navigator)
・・・Home2Screen(Stack.Screen)
・・・Detail2Screen(Stack.Screen)

実装方法について

必要なパッケージのインストール

まず、以下6つのパッケージをインストールします。

yarn add @react-navigation/native
yarn add react-native-gesture-handler
yarn add react-native-reanimated
yarn add react-native-screens
yarn add react-native-safe-area-context
yarn add @react-native-community/masked-view

次に、今回は、スタック(stack)、タブ(tab)ナビゲーションを絡めたものを作成するため、上記パッケージに加え、以下の2つのパッケージをインストールします。

yarn add @react-navigation/stack
yarn add @react-navigation/bottom-tabs

パッケージのインストールが完了すると、package.jsonファイルにインストールされたパッケージが追加されます。

App.jsにタブナビゲーションのコードを書く

App.jsにタブナビゲーションのコードを以下のように書きます。

Tab.Screencomponentには、スタックナビゲーションのコードが書かれたものをいれます。

各タブへ入れるスタックナビゲーションのコード

スタックナビゲーション内のスクリーンのコードについて

まとめ

タブナビゲーションの各タブに、スタックナビゲーションが入れ子になっている構造のものを作成しました。

コードはGitHubに上げているのでよければ参考にしてください。

https://github.com/togamin/StackTabNav.git

参考

>A stack navigator for each tab|React Native