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

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

【React Native】Tab navigationの実装

どうも、とがみんです。

前回の記事では、スタック型ナビゲーションによる画面遷移の方法についてまとめてきました。
この記事では、タブにより画面遷移の方法についてまとめていきます。

今回作成するもの

今回は以下のような、タブでページの切り替えができるようなものを作成していきます。

タブナビゲーションの実装について

必要なパッケージのインストールについて

前回同様、ReactNavigationを実装するにあたって、以下のコマンドをターミナルで実行し、必要なライブラリをインストールします。

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

今回はタブナビゲーションを実装するため、上記に加えて以下を実行します。

yarn add @react-navigation/bottom-tabs

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

各タブのスクリーンファイルの作成

各タブのスクリーン用のファイルを作成します。
ミミッキュの画像が表示されるスクリーンと、ピカチュウが表示されるスクリーンを以下のように作成します。

タブ機能の実装

App.jsの編集

App.js

に以下のようにすることで、タブが表示されます。

タブのアイコン

タブのアイコンの表示についてのプログラムです。
import { Ionicons } from ‘@expo/vector-icons’;をインポートすることで、expoが用意しているアイコンを簡単に使うことができます。

アイコンは、タブ選択時と非選択時でそれぞれ指定しています。

タブのデザイン

以下のコードでタブの部分のデザインを決めています。

まとめ

React Nativeでタブナビゲーションの実装についてまとめてきました。
GitHubにコードを上げているのでよければ参考にしてください。

https://github.com/togamin/TabNavSample

参考

>Tab navigation|React Navigation