筋トレ大学生によるアウトプット雑記

筋トレや読書のことをはじめとして、プログラミングその他日常生活における様々なことについて書いていきます。

Output Blog

主に筋トレ・プログラミングについて書きます

React Native入門④ React Navigationを使おう【2020】

スポンサーリンク

React Native入門④ React Navigationを使おう【2020】

React Nativeについて知りたいですか?
前回の記事ではToDoリストを作成しました。
今回は複数ページ間の遷移を行えるように、React Navigationというライブラリを学びましょう!
本記事では

  • React Navigationインストール
  • React Navigation 5系の使い方
  • 5系は書き方が全く違うので注意!

といったことを紹介します。
アプリ開発に興味のある方必見です。是非ご覧ください。

React Navigationインストール

まずはReact Navigationをインストールしましょう!
下記コードを作業用ディレクトリでコマンドプロンプトに打ち込みます。

npm install --save @react-navigation/native react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

さらに今回使うスタックナビとボトムタブナビのパッケージもインストールします。

npm install @react-navigation/bottom-tabs
npm install @react-navigation/stack

※5系の前、4系までは、react-navigationというパッケージでしたが、5系からは上記のように変わりました。注意してください。

React Navigation実践

それでは実際に書いていきましょう!

StackNavigation

スタックナビゲーションはその名の通り、スタックを用いた画面遷移です。
どんどん上にページを重ねていく感じです。
サンプルコードは下記。

このサンプルでは、クラスでコンポーネントを書く方、フックでコンポーネントを書く方、どちらの方でもわかりやすいように、両方のコンポーネントの書き方をしてます。
要点は、

  1. propsにnavigationを渡す(必須)
  2. NavigationContainerで囲う(必須)
  3. 画面遷移は、navigation.navigateを使う

です。
基本書き方は上記を真似てもらえば大丈夫です。
画面を追加する場合も、同じように追加するだけですね。

BottomTabNavigation

ボトムナビは下に表示されるやつです。たぶん見覚えあると思います!

このサンプルは、スタックとボトムナビの組み合わせです。
意外と簡単ですね!


5系は全く書き方が違うので注意

現在、React Navigationのバージョンは5系です。
5系では、それまでの書き方から大幅に変わりました。
4系から5系は、2020年2月6日にアップデートされました。
なので、それ以前の書籍・Webサイトでは4系についての紹介しか行っておらず、対応できません。
本サイトでは今後も5系を用いていきますので、ご安心ください。

なお、詳しい違いは
https://reactnavigation.org/docs/upgrading-from-4.x/
で解説されています。(※:英語です)

まとめ

今回は、React Navigationについてまとめました。
5系の書き方はしっかりと覚えておきましょう。

スポンサーリンク

//タブメニュー