既存編、応用編1からの続きです。
シリーズ
- React-Navigatorを利用してみる(基礎編)
- RN応用編1:Drawer Navigatorをハンバーガーメニューで表示させる
- RN応用編2:TabやDrawerメニューにアイコンを設定する→この記事
- RN応用編3:Reduxで値の取り回し
概要
応用編1ではハンバーガーメニューで見た目をいじったので、ついでにTabやDrawerメニューにアイコンを追加してみます。
Tabメニューにアイコンを追加
アイコンもいくつかの場所で追加できますが、ここではcreateBottomTabNavigator()にnavigationOptionsを定義することで追加してみます。
Tabにアイコンを追加します。react-native-vector-iconsを利用するので、installやimportがまだであれば実行してください。
App.js(抜粋)
+import Icon from 'react-native-vector-icons/FontAwesome';
.....
//Tab
const Tab = createBottomTabNavigator(
{
Tab1: {
screen: createStackNavigator({ Tab1: { screen: Tab1 } }),
+ navigationOptions: {
+ tabBarIcon: ({ tintColor }) => <Icon size={24} name="home" color={tintColor} />
+ }
},
Tab2: {
screen: createStackNavigator({ Tab2: { screen: Tab2 } }),
+ navigationOptions: {
+ tabBarIcon: ({ tintColor }) => <Icon size={24} name="cog" color={tintColor} />
+ }
},
}
);
.....
動作確認します。
![スクリーンショット 2018-10-27 22.29.47.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F55188%2F06bbd530-e03c-f230-a9e5-73cbba640bcf.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=9ea3a320b8946ff36150cd7025030c8e)
Tabにアイコンが追加されました。
Drawerメニューにアイコンを追加
次にDrawerメニューにアイコンを追加してみます。
記述場所はTabと同じくcreateDrawerNavigator()のnavigationOptionsです。
App.js(抜粋)
.....
//drawer
const Drawer = createDrawerNavigator(
{
Stacks: {
screen: Stack,
navigationOptions: {
drawerIcon: <Icon name="check" size={24} />
}
},
Tabs: {
screen: Tab,
navigationOptions: {
drawerIcon: <Icon name="check" size={24} />
}
},
Single1: { screen: Single1 },
Single2: { screen: Single2 },
},
{
initialRouteName: 'Tabs'
}
);
.....
確認してみます。
2箇所のみ、かつ全て同じアイコンになっていますが、お好みで変更してみてください。
![スクリーンショット 2018-10-27 22.36.38.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F55188%2F6d5572db-213c-f2eb-45f2-8c3eb6ac1b4c.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5a33410d2005c6dc311d9d61d989f070)
以上なります。
## 関連リンク