{
"$type": "site.standard.document",
"canonicalUrl": "https://blog.nove-b.dev//posts/implement-bottom-tabs-navigator-react-native",
"path": "/posts/implement-bottom-tabs-navigator-react-native",
"publishedAt": "2023-10-23T00:00:00.000Z",
"site": "at://did:plc:2atly2y5kfyjcj5zap6pv4wd/site.standard.publication/3mmxeqr2tcb2k",
"tags": [
"bottom-tabs-navigator",
"react-native",
"タブナビゲーション"
],
"textContent": "スマホアプリでよく見るボトムメニューをReact Nativeで導入するには、Bottom Tabs Navigatorというパッケージをインストールする必要がある。\n\nちなみにナビゲーションには他にもStack Navigatorというものもあり、こちらは一覧画面から詳細画面への遷移等に用いられるらしい。\n\n詳細は↓に引用した。\n\nStackNavigator\n\n> StackNavigatorは主にはアプリにおける「一覧画面」と「詳細画面」のような関係性がある画面間の遷移の用いられます。特徴として画面が手前に積み重なっていくような挙動をし、iOSの右スワイプ(画面の左端を掴んで右にスワイプ)やAndroidの戻るボタンで1つ前の画面に戻ることができます。\n\n【RN】StackとBottomTabNavigatorを組み合わせたサンプル\n\nBottomTabNavigator\n\n> アプリにおいて機能がいくつかのカテゴリに分かれている場合にBottomTabNavigatorは用いられます。TwitterやFacebookやInstagramなど、多機能なアプリは大概このBottomTabNavigatorで画面制御を行っています。\n\n【RN】StackとBottomTabNavigatorを組み合わせたサンプル\n\n実践していく\n\nまずは移動するページが欲しいので、\n\n適当に作成する。\n\nSample.tsxは\n\nこんな感じになる。\n\nちなみに、divに相当するものがViewコンポーネントで、pタグに相当するのがTextコンポーネント。そしてScrollViewはコンテンツをスクロールできるようにするもの。\n\n作成したページをApp.tsxで読み込む。\n\n同様にSample2とかを作成する。\n\nただこの時点でApp.tsxに読み込むのは。SampleかSample2のどちらか一方でいい。\n\n必要なパッケージをインストールする\n\n上記インストール後にApp.tsxを下記のように変更する。\n\nこれでタブは完成した。\n\n実機で確認することでページ遷移していることを確認できる。\n\nカスタマイズの例\n\nアイコンの付与\n\nタブにアイコンを付与するには、\n\nimport { iconType } from \"@expo/vector-icons\";でアイコンをインストールし、\n\nTabにオプションを追加する。\n\nスタイルの変更\n\n<html> <body> <!--StartFragment-->\n\n| キーワード | 内容 |\n| ----------------------- | -------------------------------------------- |\n| headerStyle | ヘッダーのスタイルを記述する部分 |\n| headerTintColor | ヘッダーのタイトルの色 |\n| headerTitleStyle | ヘッダータイトルのスタイルを記述する部分 |\n| tabBarStyle | 下方のタブのスタイルを記述する部分 |\n| tabBarInactiveTintColor | タブバーアイコンの色 |\n| tabBarActiveTintColor | タブバーのアクティブ（表示されている方）の色 |\n\n<!--EndFragment--> </body> </html>\n\nこんな感じでスタイルも変更できる。",
"title": "React NativeでBottom Tabs Navigatorを使用しタブナビゲーションを実装する"
}