React NativeでBottom Tabs Navigatorを使用しタブナビゲーションを実装する

スマホアプリでよく見るボトムメニューをReact Nativeで導入するには、Bottom Tabs Navigatorというパッケージをインストールする必要がある。 ちなみにナビゲーションには他にもStack Navigatorというものもあり、こちらは一覧画面から詳細画面への遷移等に用いられるらしい。 詳細は↓に引用した。 StackNavigator > StackNavigatorは主にはアプリにおける「一覧画面」と「詳細画面」のような関係性がある画面間の遷移の用いられます。特徴として画面が手前に積み重なっていくような挙動をし、iOSの右スワイプ(画面の左端を掴んで右にスワイプ)やAndroidの戻るボタンで1つ前の画面に戻ることができます。 【RN】StackとBottomTabNavigatorを組み合わせたサンプル BottomTabNavigator > アプリにおいて機能がいくつかのカテゴリに分かれている場合にBottomTabNavigatorは用いられます。TwitterやFacebookやInstagramなど、多機能なアプリは大概このBottomTabNavigatorで画面制御を行っています。 【RN】StackとBottomTabNavigatorを組み合わせたサンプル 実践していく まずは移動するページが欲しいので、 適当に作成する。 Sample.tsxは こんな感じになる。 ちなみに、divに相当するものがViewコンポーネントで、pタグに相当するのがTextコンポーネント。そしてScrollViewはコンテンツをスクロールできるようにするもの。 作成したページをApp.tsxで読み込む。 同様にSample2とかを作成する。 ただこの時点でApp.tsxに読み込むのは。SampleかSample2のどちらか一方でいい。 必要なパッケージをインストールする 上記インストール後にApp.tsxを下記のように変更する。 これでタブは完成した。 実機で確認することでページ遷移していることを確認できる。 カスタマイズの例 アイコンの付与 タブにアイコンを付与するには、 import { iconType } from "@expo/vector-icons";でアイコンをインストールし、 Tabにオプションを追加する。 スタイルの変更 | キーワード | 内容 | | ----------------------- | -------------------------------------------- | | headerStyle | ヘッダーのスタイルを記述する部分 | | headerTintColor | ヘッダーのタイトルの色 | | headerTitleStyle | ヘッダータイトルのスタイルを記述する部分 | | tabBarStyle | 下方のタブのスタイルを記述する部分 | | tabBarInactiveTintColor | タブバーアイコンの色 | | tabBarActiveTintColor | タブバーのアクティブ（表示されている方）の色 | こんな感じでスタイルも変更できる。