react-navigation

GOAL

アプリケーションで画面を簡単に切り替えて、ほとんどのアプリケーションで使用されているreact-navigationでのbottabnavigationの使用方法を理解します.

react-navigation V6

現在react-navigationのバージョンは6.0.0で、少し前に更新されました.(2021年8月4日)

サイト
react-navigationホームページ

始める前に。

react-navigation V 6を使用する前に、少なくとも[email protected]以上のバージョンのはずです.
Expo CLIを使用している場合は、Expo SDK 41以降でなければなりません.

react-navigationのインストール

npm install @react-navigation/native

上記のコマンド語でアプリケーションに重要なnavigation structureを作成します.
またreact-navigationを使用する場合、他の必要なライブラリもインストールされます.

Expo CLI

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context

React Native CLI

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context

インストールが完了したらiosフォルダの下でコマンドを実行します.

cd ios

pod install

Bottom Tab Navigation

最も一般的なスタイルは、画面の下部でTabで画面を切り替えるNavigationです.

以下のコマンドで設定できます.

npm install @react-navigation/bottom-tabs

次のコードはreact-navigation docに含まれる基本コードです.

Custom Bottom Tab Navigation

デザイナーと協力したり、自分のアイコンイメージがある場合にカスタマイズできる方法.

のproperty optionsから見ると,一般iconの代わりにImageを用い,焦点によってImage iconに異なる選択を与えた.また、sizeはbottom tab navigationで携帯電話の種類別に提供されており、別途指定する必要はありません.

結果