とがみんブログ
就活中、自己分析にハマり、心理学、脳科学の本を読み漁りつつ哲学チックなことをひたすら考えていました。このブログでは、そんなとがみんの考えや経験を綴っていきます。
React Native

【React native】タブナビゲーション機能の実装

どうも、アンドロイド用ブログ管理アプリ「Feedmin」を開発すべく、React Nativeについて勉強中のとがみんです。

調べたこと、勉強したことのアウトプットをこのブログでもしていきます。

この記事では、タブバーについて紹介して行きます。

サンプリアプリ

以下のものがタブバーを実装したものです。

スポンサードリンク

実装方法

パッケージのインストール

必要なパッケージをインストールします。今回はナビゲーションに関するライブラリとアイコンに関するパッケージをインストールします。

タブバーの実装

App.jsファイルを以下のように書きます。

タブバーの実装に必要なライブラリ、createBottomTabNavigatorをインポートし、

createBottomTabNavigator({})内に、各タブに使用するスクリーンと、タブに適応させるスタイルを設定します。

タブにアイコンを設定する方法

App.jsファイルに、アイコンを使うためのライブラリをインポートし、

createBottomTabNavigator({})内を以下のように変更します。

これで、タブバーの中にアイコンが表示されるかと思います。

GitHub

以下がタブバーナビゲーションに関するサンプルコードです。参考にしながら実装してみてください。

>https://github.com/togamin/ReactTabSample.git

まとめ

React Nativeにおけるタブバーの実装方法とそのアイコンの設定方法について説明しました。

何か不明点等あればご指摘くださると嬉しいです。

参考文献

>React Navigationのタブナビゲーションをカスタマイズしてみよう!

>React-Native-vector-iconsで使えるアイコン一覧

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