React Navigation ver 3.x でBottomNavigationを実装する
こんにちは。てちこまです。
現在 ReactNative のプロジェクトをやっているのですが BottomNavigation の実装に詰まったので記事にしようと思います。
概要
React Navigation で BottomNavigation とルーティングを行う。
※Version 違いなどで正確性を担保出来ないので公式 Docsは並行してご覧ください。
開発環境
- Windows10
- react-native-cli
- android
- typescript
- vscode
- yarn(npm でも可)
※すでに react-native は導入されており初期のテンプレ画面が起動しているものとして以降進めていきます。
導入
まず以下のパッケージをすべて install します。
ReactNavigation 本体
|
1 |
yarn add react-navigation |
ReactNavigation ジェスチャー
|
1 |
yarn add react-native-gesture-handler react-native-reanimated |
BottomNavigation 本体
|
1 |
yarn add react-navigation-material-bottom-tabs react-native-paper |
react-vector-icon※導入していない方のみ
|
1 |
yarn add react-native-vector-icons |
※ios の方はこれ以外に手順が必要ですのでこちらのページを参考にセットアップしてください。
実装
はい、すみません。まず結論から載せます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
/** * Router.tsx */ import React from "react"; import { createAppContainer } from "react-navigation"; import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs"; import HomeScreen from "../pages/HomeScreen"; import GraphsScreen from "../pages/GraphsScreen"; import SettingsScreen from "../pages/SettingsScreen"; import Icon from "react-native-vector-icons/SimpleLineIcons"; const TabBarIcon = (iconName: string) => function TabBarIconContent({ tintColor }: string): JSX.Element { return <Icon name={iconName} size={25} style={{ color: tintColor }} />; }; const AppNavigator = createMaterialBottomTabNavigator( { Home: { screen: HomeScreen, navigationOptions: { tabBarLabel: "Home", tabBarColor: "#FFFFFF", tabBarIcon: TabBarIcon("home") } }, Graphs: { screen: GraphsScreen, navigationOptions: { tabBarLabel: "Graphs", tabBarColor: "#FFFFFF", tabBarIcon: TabBarIcon("graph") } }, Settings: { screen: SettingsScreen, navigationOptions: { tabBarLabel: "Settings", tabBarColor: "#FFFFFF", tabBarIcon: TabBarIcon("settings") } } }, { labeled: true, shifting: true, activeTintColor: "#00AD97", inactiveTintColor: "#747575", activeBackGroundColor: "#fff", inactiveBackgroundColor: "#fff" } ); const AppContainer = createAppContainer(AppNavigator); const Router = () => { return <AppContainer />; }; export default Router; |
こちらのRouter.tsxはrootにあたるのでつまり初期の App.tsx と位置的には同じになりますね。
これが BottomNavigationt とページ遷移の実装部分なので、この Router を index.js で import して
|
1 |
AppRegistry.registerComponent(appName,Router) |
このようにセットすることで BottomNavigation が表示されページ遷移ができるようになります。
それでは要点をいくつか説明していこうと思います。
まず
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
const AppNavigator = createMaterialBottomTabNavigator( { Home: { screen: HomeScreen, navigationOptions: { tabBarLabel: "Home", tabBarColor: "#FFFFFF", tabBarIcon: TabBarIcon("home") } }, Graphs: { screen: GraphsScreen, navigationOptions: { tabBarLabel: "Graphs", tabBarColor: "#FFFFFF", tabBarIcon: TabBarIcon("graph") } }, Settings: { screen: SettingsScreen, navigationOptions: { tabBarLabel: "Settings", tabBarColor: "#FFFFFF", tabBarIcon: TabBarIcon("settings") } } }, { labeled: true, shifting: true, activeTintColor: "#00AD97", inactiveTintColor: "#747575", activeBackGroundColor: "#fff", inactiveBackgroundColor: "#fff" } ); |
こちらは import した createMaterialBottomTabNavigator()を利用し BottomNavigation の設定を行っています。
第 1 引数で Route 関連と個別タブの設定を、第 2 引数で BottomNavigation 全体の設定を行います。
第 1 引数のみ解説いたします。ほかオプションは公式 Docsを参照ください。
|
1 2 3 4 5 6 7 8 |
pathName: { screen: importしたページ, navigationOptions: { tabBarLabel: 'BottomNavigationのラベルで表示する名前', tabBarColor: 'タブが選択された時のカラーコード※16進数', tabBarIcon: TabBarIcon('home'), //※後ほど説明します。 }, }, |
また、 Icon に関してですがこちらの一覧から選択してお使いください。
react-native-vector-iconsはimport のpathが使用する Icon パッケージによって変動することにご注意ください。(全部一気に入れる方法あるんかな...)
感想
本当はもうちょい丁寧に書いてたんだけど投稿前に記事全部消えちゃったのでかなりざっくりになってしまった...
最初に詰まったって言ってたのは実はIconのimportの部分でして。
確か何度やっても module がないってなったんですよね。
ほんで蓋開けたら
|
1 2 |
import {Icon} ☓ import Icon ◯ |
だめだったのはここだけだったんですけどw
なんでだめなのか分かってないのでこの部分はまたちょっと調べようかなと思います。
(追記)export defaultでexportされてるcomponent受け取りは{}なし、defaultなしのexportは{}ありだそうです。
【Q&A】ReactJSのComponentをimport,exportする
ちなみにこれだけだとpageのstackとか不完全なんでReact Navigationの別コンポーネントでstack navigation(名前はテキトウ)みたいなのを導入する必要があります。あるはずです。
うまいことできたらそっちも小ネタってことで記事にします。
