- Tab Navigation(ver5.0)を使った画面遷移の方法
について解説していきます。
また、以下の記事で、他のNavigationを使った画面遷移の方法も紹介していますので、ぜひそちらもご覧ください。
本記事の内容 画面遷移の種類 画面遷移の実装方法 について解説していきます。 1. 概要 ReactNativeでナビゲーション(画面遷移)を実装する時に使用するライブラリは、以下の3種類が挙げられます。 ・Stack …
本記事の内容 Drawer Navigation(ver5.0)を使った画面遷移の方法 について解説していきます。 また、以下の記事で、他のNavigationを使った画面遷移の方法も紹介していますので、ぜひそちらもご覧 …
1. 概要
1.1 Tab Navigation
Tab Navigationには、以下の3種類があります。・createBottomTabNavigator
画面の下部にタブメニューを表示。
公式ドキュメント: createBottomTabNavigator
・createMaterialBottomTabNavigator
画面の下部にマテリアルデザインをテーマにしたタブメニューを表示。タブの切り替え時にアニメーションが付きます。
公式ドキュメント: createMaterialBottomTabNavigator
・createMaterialTopTabNavigator
画面の上部にタブメニューを表示。
公式ドキュメント: createMaterialTopTabNavigator
と言うことで、今回は、createMaterialBottomTabNavigatorを使って、画面遷移を実装していきます。
本記事を読むことでこのようなアプリを作ることができます。
2. TabNabigationの実装
(createMaterialBottomTabNavigator)
2.1 パッケージのインストール
まず、ターミナルで以下のコマンドを実行してパッケージをインストールします。
|
1 |
npm install --save @react-navigation/material-bottom-tabs react-native-paper @react-navigation/native |
2.2. ソースコード
フォルダ構成
今回のプログラムのフォルダ構成は、以下になっています。|
1 2 3 4 5 |
├── component │ ├── HomeScreen.js │ ├── SecondScreen.js │ └── ThidScreen.js └── App.js |
App.js
|
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 58 59 60 61 62 63 64 |
import React from 'react'; import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'; import { NavigationContainer } from '@react-navigation/native'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import HomeScreen from './component/HomeScreen' import SecondScreen from './component/SecondScreen' import ThirdScreen from './component/ThirdScreen' const Tab = createMaterialBottomTabNavigator(); const App = () => { return ( <NavigationContainer> <Tab.Navigator initialRouteName="HomeScreen" activeColor="white" inactiveColor='black' shifting={true} > {/* HomeScreen */} <Tab.Screen name="HomeScreen" component={HomeScreen} options={{ tabBarLabel: 'Home', tabBarIcon: ({ color }) => ( <Icon name="home" color={color} size={26} /> ), tabBarColor: 'hsla(210, 90%, 50%, 0.9)' }} /> {/* SecondScreen */} <Tab.Screen name="SecondScreen" component={SecondScreen} options={{ tabBarLabel: 'SecondScreen', tabBarIcon: ({ color }) => ( <Icon name="account" color={color} size={26} /> ), tabBarColor: 'hsla(0, 90%, 50%, 0.7)' }} /> {/* ThirdScreen */} <Tab.Screen name="ThirdScreen" component={ThirdScreen} options={{ tabBarLabel: 'ThirdScreen', tabBarIcon: ({ color }) => ( <Icon name="feather" color={color} size={26} /> ), tabBarColor: 'hsla(150, 90%, 40%, 0.7)' }} /> </Tab.Navigator> </NavigationContainer> ); } export default App; |
- @react-navigation/material-bottom-tabsをインポートする。
- Tab.Screenにタブに表示させたい画面を設定する。
- ヘッダーやタブメニューのカスタマイズ。
＜Tab.Navigator＞コンポーネントについて解説
|
1 2 3 4 5 6 |
<Tab.Navigator initialRouteName="HomeScreen" activeColor="white" inactiveColor='black' shifting={true} > |
| initialRouteName | ナビゲーターのデフォルト画面を設定します。 |
| activeColor | 選択中のタブの「アイコン」と「ラベル」の色を設定。 |
| inactiveColor | 選択されていないタブの「アイコン」と「ラベル」の色を設定。 |
| shifting | タブの切り替え時にアイコンとラベルが浮き上がるように表示されるアニメーション。 非選択中のタブにはラベルが表示されない。 ※タブの数が4つ以上の場合、デフォルトで”true”が設定されているが、 3つ以下の場合は、”false”になっている。 アニメーションを付けたいと言う方は、”true”に設定しましょう。 |
| labeled | タブにラベルを表示するかどうか。falseの場合、アイコンのみが表示されます。 |
| barStyle | 下部のナビゲーションバーのスタイル。背景色やpaddingを設定できる |
＜Tab.Screenコンポーネント＞について解説
|
1 2 3 4 5 6 7 8 9 10 11 |
<Tab.Screen name="SecondScreen" component={SecondScreen} options={{ tabBarLabel: 'SecondScreen', tabBarIcon: ({ color }) => ( <Icon name="account" color={color} size={26} /> ), tabBarColor: 'hsla(0, 90%, 50%, 0.7)' }} /> |
| name component |
コンポーネント名 |
| options | ナビゲーションバーの設定 |
| title (または、tabBarLabel) |
タブバーに表示される文字列 |
| tabBarIcon | アイコンをタブバーに表示します。 |
| tabBarColor | 画面に対応するタブがアクティブなときのタブバーの色。 波及効果に使用されます。※これは、shiftingが”true”の場合にのみ有効になります。 |
もっと細かく設定したいと言う方は、下記のドキュメントを参照してください。
公式ドキュメント： createBottomTabNavigator
component/HomeScreen.js
|
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 |
import React from 'react'; import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'; export default class HomeScreen extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.font}>HomeScreen</Text> <TouchableOpacity onPress={()=>{this.props.navigation.navigate('SecondScreen')}}> <Text style={styles.button}>Button</Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'hsla(210, 90%, 50%, 0.2)', }, font: { fontSize: 30, fontWeight: "bold", }, button: { fontSize: 30, marginTop: 20, borderWidth: 1, borderColor: "black", padding: 5, backgroundColor: "white", borderRadius: 10, overflow: "hidden", } }) |
- デフォルト画面
- SecondScreenに画面遷移するボタンを配置しています。
component/SecondScreen.js
|
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 |
import React from 'react'; import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'; export default class SecondScreen extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.font}>SecondScreen</Text> <TouchableOpacity onPress={()=>{this.props.navigation.navigate('ThirdScreen')}}> <Text style={styles.button}>Button</Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'hsla(40, 90%, 50%, 0.2)', }, font: { fontSize: 30, fontWeight: "bold" }, button: { fontSize: 30, marginTop: 20, borderWidth: 1, borderColor: "black", padding: 5, backgroundColor: "white", borderRadius: 10, overflow: "hidden", } }) |
- ThidScreenに画面遷移するボタンを配置しています。
component/ThidScreen.js
|
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 |
import React from 'react'; import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'; export default class ThirdScreen extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.font}>ThirdScreen</Text> <TouchableOpacity onPress={()=>{this.props.navigation.navigate('HomeScreen')}}> <Text style={styles.button}>Button</Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'hsla(150, 90%, 50%, 0.2)', }, font: { fontSize: 30, fontWeight: "bold" }, button: { fontSize: 30, marginTop: 20, borderWidth: 1, borderColor: "black", padding: 5, backgroundColor: "white", borderRadius: 10, overflow: "hidden", } }) |
- HomeScreenに画面遷移するボタンを配置しています。
3. まとめ
今回は、material-bottom-tab-navigatorについて解説しました。
タブメニューにアニメーションを付けたいと言う方には、おすすめのライブラリになっています。
“【ReactNative】Tab Navigation(ver5.0)を使って画面遷移を実装” への2件のフィードバック