RN応用編２：TabやDrawerメニューにアイコンを設定する

既存編、応用編１からの続きです。

シリーズ

• React-Navigatorを利用してみる（基礎編）
• RN応用編１：Drawer Navigatorをハンバーガーメニューで表示させる
• RN応用編２：TabやDrawerメニューにアイコンを設定する→この記事
• RN応用編３：Reduxで値の取り回し

概要

応用編１ではハンバーガーメニューで見た目をいじったので、ついでに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'
    }
);

.....

確認してみます。
２箇所のみ、かつ全て同じアイコンになっていますが、お好みで変更してみてください。

以上なります。

　関連リンク

• RN応用編３：Reduxで値の取り回し