React Navigation ver 3.x でBottomNavigationを実装する

こんにちは。てちこまです。
現在 ReactNative のプロジェクトをやっているのですが BottomNavigation の実装に詰まったので記事にしようと思います。

概要

React Navigation で BottomNavigation とルーティングを行う。

※Version 違いなどで正確性を担保出来ないので公式 Docsは並行してご覧ください。

開発環境

  • Windows10
  • react-native-cli
  • android
  • typescript
  • vscode
  • yarn(npm でも可)
    ※すでに react-native は導入されており初期のテンプレ画面が起動しているものとして以降進めていきます。

導入

まず以下のパッケージをすべて install します。

ReactNavigation 本体

ReactNavigation ジェスチャー

BottomNavigation 本体

react-vector-icon※導入していない方のみ

※ios の方はこれ以外に手順が必要ですのでこちらのページを参考にセットアップしてください。

実装

はい、すみません。まず結論から載せます。

こちらのRouter.tsxはrootにあたるのでつまり初期の App.tsx と位置的には同じになりますね。
これが BottomNavigationt とページ遷移の実装部分なので、この Router を index.js で import して

このようにセットすることで BottomNavigation が表示されページ遷移ができるようになります。

それでは要点をいくつか説明していこうと思います。
まず

こちらは import した createMaterialBottomTabNavigator()を利用し BottomNavigation の設定を行っています。

第 1 引数で Route 関連と個別タブの設定を、第 2 引数で BottomNavigation 全体の設定を行います。

第 1 引数のみ解説いたします。ほかオプションは公式 Docsを参照ください。

また、 Icon に関してですがこちらの一覧から選択してお使いください。

react-native-vector-iconsはimport のpathが使用する Icon パッケージによって変動することにご注意ください。(全部一気に入れる方法あるんかな...)

感想

本当はもうちょい丁寧に書いてたんだけど投稿前に記事全部消えちゃったのでかなりざっくりになってしまった...

最初に詰まったって言ってたのは実はIconのimportの部分でして。
確か何度やっても module がないってなったんですよね。
ほんで蓋開けたら

だめだったのはここだけだったんですけどw

なんでだめなのか分かってないのでこの部分はまたちょっと調べようかなと思います。

(追記)export defaultでexportされてるcomponent受け取りは{}なし、defaultなしのexportは{}ありだそうです。
【Q&A】ReactJSのComponentをimport,exportする

ちなみにこれだけだとpageのstackとか不完全なんでReact Navigationの別コンポーネントでstack navigation(名前はテキトウ)みたいなのを導入する必要があります。あるはずです。

うまいことできたらそっちも小ネタってことで記事にします。

てちこま

高卒後3年ニート。 起死回生でコン専入学。 資格とったり、アプリ作ったりしてました。 2020から新米WEBエンジニアになりました。

シェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメントする