React Native入門④ React Navigationを使おう【2020】
スポンサーリンク
前：React Native入門③ シンプルなToDoリストの作成【2020】 - 筋トレ大学生によるアウトプット雑記
次：React Native入門⑤ News APIを使ってニュースページを作る【2020】 - 筋トレ大学生によるアウトプット雑記
次：React Native入門⑤ News APIを使ってニュースページを作る【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
スタックナビゲーションはその名の通り、スタックを用いた画面遷移です。
どんどん上にページを重ねていく感じです。
サンプルコードは下記。
このサンプルでは、クラスでコンポーネントを書く方、フックでコンポーネントを書く方、どちらの方でもわかりやすいように、両方のコンポーネントの書き方をしてます。
要点は、
- propsにnavigationを渡す(必須)
- NavigationContainerで囲う(必須)
- 画面遷移は、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系の書き方はしっかりと覚えておきましょう。
