既存編、応用編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} />
+ }
},
}
);
.....
動作確認します。

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箇所のみ、かつ全て同じアイコンになっていますが、お好みで変更してみてください。

以上なります。
## 関連リンク