今回は、アイコンがついたオシャレなタブを簡単に実装していきます。
最終的にはこのようなタブを作れます。
タブ：react-navigation
タブの実装には、react-navigationを利用します。
react-navigationは簡単に画面遷移を実現することができるReact Native向けのライブラリです。
react-navigationのいち機能で、タブを実装することができます。
そのためには、react-navigationのreact-navigation/nativeとreact-navigation/bottom-tabsを使います。
使い方としては、次の通り。
まずは、Tabのインスタンスを生成します。
const Tab = createBottomTabNavigator();
続いて、表示する部分を記述していきます。
一番外側のタグは<NavigationContainer>、次に<Tab.Navigator>、最後に各々のタブの設定として<Tab.Screen>を記述します。
<Tab.Navigator>の下には、タブの数だけ<Tab.Screen>を並べます。
補足
Tab.Screen以外に、Stack.Screenというのもあります。
Tab.Screenはタブ選択による画面遷移を特化した機能ですが、Stack.Screenはメニューでの選択やボタンでの移動なのでもう少し汎用的な使い方ができます。
<NavigationContainer>の下には、このStack.Screenを並べることもできます。
これだけで、タブ画面が実装できますが、ここまでの実装だと、次のような画面となります。
少し味気ないですね。
自分で画像を用意して、アイコンを添えてあげてもいいのですが、今回はreact-native-vector-iconsを使って、アイコンを埋め込んでいきましょう。
アイコン：react-native-vector-icons
react-native-vector-iconsはアイコンを埋め込むためのライブラリです。
デフォルトでたくさんのアイコンが用意されていて、nameを指定するだけで、そのアイコンを利用することができます。
nameとアイコンの対応表はこちらです。
https://oblador.github.io/react-native-vector-icons/
実装としては次の通り。
<Icon/>にnameと文字色colorやアイコンサイズsizeを指定するだけ。
簡単ですね！！！
簡単＆オシャレタブを実装してきましょう！
では、ここまで紹介したタブとアイコンの実装を組み合わせていきましょう。
アイコンをタブに埋め込むには、<Tab.Screen>の引数(option)として、tabBarIconを設定する必要があります。
これだけで、タブにアイコンを埋めることができました。
こちらが、最終版の実装です。
今回は、HomeタブとCameraタブを作ってみました。
それぞれタップ（or クリック）すると、画面が切り替わりましたね。
さらに発展系としては、タブの画面ごとにそのタブ画面でしか遷移できない画面を作成することができます。
それはまた別途紹介します。
また、今回利用したreact-native-vector-iconsのアイコンはMITライセンスになります。
MITライセンスの詳細はこちらのサイトがわかりやすいです。
