Aiki x Developer

react-native

React Native, React Navigation 5のアップデートまとめ Part 1

September 19th, 2020

react-native

どうもー、ドイツでフリーランスのフルスタックエンジニアをしています、Arisaです🇩🇪

最近、React Nativeでモバイルアプリ開発の案件を1つ取り組んでいるんですが、ちょっと文字に起こして整理整頓したいなと思った内容があったので、まとめてみます。

この記事は、JavaScript、Reactを理解していることが前提で、React Nativeを私のように勉強中という人向けの記事です。

今回まとめる内容は、React Navigationのv4からv5へのアップデート内容です。

React Navigationの日本語ソース自体が、そもそもほとんどないのと、最新React Navigation 5のソースは今の時点ではめちゃ少なかったので、公式ドキュメントが英語オンリーで辛い人に役立てれば嬉しいです👍

インストールなどの導入部分は、公式ドキュメントに書いてあるコマンドを、そのまま実行だけでいいので、割愛します。

が、導入コマンドもv4とv5は異なるので、パッケージ名の変更などは、以下を参考にしてください。

パッケージ名変更の把握

以下のパッケージ名が、v5では変わっているらしい🔍

  • react-navigation → @react-navigation/native

  • react-navigation-stack → @react-navigation/stack

  • react-navigation-tabs → @react-navigation/bottom-tabs, @react-navigation/material-top-tabs

  • react-navigation-material-bottom-tabs → @react-navigation/material-bottom-tabs

  • react-navigation-drawer → @react-navigation/drawer

実際私はv4のままreact-navigation-stack書いてて引っかかった。

賢いことに、React Nativeのエミュレーターはちゃんと「v4をv5に混ぜて書いてない?」って聞いてくれる。

createAppContainerはNavigationContainerに

公式ドキュメント見ると、v5は、Navigation Containerで、wrapperのようにナビゲーション全体を囲む必要があるらしい。

navigationContainer

公式ドキュメント: https://reactnavigation.org/docs/upgrading-from-4.x/#navigation-container

Navigatorコンフィグが、静的(static)からpropsで動的(dynamic)に

Reactの代名詞でもあるpropsを駆使して、navigatorを実装するようになっている。

これはコードを見てもわかるけど、結構大きな違いが視覚的にもわかる🔍

例えるなら、v4は着せ替えできないリカちゃん人形で、v5は着せ替え可能なリカちゃん人形的なイメージ👗(世代がバレる例え 笑)

v4navconfig

↑ こっちがv4。staticに実装してるから、柔軟性低い。

v5navconfig

↑ こっちはv5。

基本のコンセプトは一緒。

共通点

  • NavigatorとScreenコンポーネントがある

  • Navigatorが親、Screenが子でネストの関係

違いはこんな感じ。

v5の違い

  • 全てのコンフィグは、propsとしてNavigatorに渡される

  • routeコンフィグはScreen要素で行う

  • 引数(params)はinitialParams と命名して、propsとしてScreen要素で使う

  • v4のnavigationOptionsは、v5ではoptions propsとしてScreen要素で使う

  • v4のdefaultNavigationOptionsは、v5ではscreenOptionsとしてNavigator要素で使う

上のコードで比較すると、確かに引数は単なる引数じゃなくて、propsになってるし、名称も変わってる。

より再利用性が高い印象。

ページコンポーネントをpropsで入れられるから、紐付けするページを変えたくなればpropsで渡す値を変えればいいだけだし、紐付けするページを増やしたかったら、Screen要素を増やせば完了する💡

例:

reactNavigationSample

navigation propの使い方が変わってる

これはちょっと慣れるまで時間かかったやつ。

navigation propsが保持するpropsは、シンプルに2種類

v5では、navigation propsが持っているpropsは、シンプルにたった2つになったらしい。

v4ではたくさんあったけど、v5ではそれを削ったってことになるので、要チェック。

存在しないpropsを引っ張ってくると、当然欲しい値は取得できないから、v5で用意されているnavigation prop直下に用意されているprops2種類をチェックしておく必要がある。

上記を「単刀直入にどう書くようになったのか」という質問の答えとしては、navigation.xxxx とアクセス演算子でつなげられるpropsが、以下の2つになったということ💡

他のScreenにリダイレクトする時は、navigation propsも、helper methodも、routeも、全部propsからネストされている

視覚的に見た方が早いので、図にします。

状況

他のページ(Screen)に行き来できるようにしたい。(例: Home ⇄ Details)

navigation-props-relationship

つまり、上記のナビゲーションコンポーネントと合わせると、こんな感じにコードで書ける。

home.js

気をつけたいのが、navigation.navigate()メソッドの引数は、以下の2つなんですが、

  • name

  • params

nameの値は、リダイレクト先Screenのnameじゃないとエラーが吐き出されること⚡️

上記のサンプルコードでも、わざとAppNavigator.jsファイルで、ReviewDetailsコンポーネントのnameを、「Details」と表面上表示させるようにしてるので、そこに着目🔍

要するに、props.navigation.navigate('ReviewDetails') と、コンポーネントファイル名を書くと、「そんなScreen名ないよ?」と怒られてしまうわけです。

navigateメソッドの基本構文はこちら👇

公式ドキュメント: https://reactnavigation.org/docs/navigation-prop/#navigate

こちらの動画もわかりやすい。

"How to use React Navigation 5 in React Native": https://www.youtube.com/watch?v=28Xr22XDcDg

よくHomeに戻るを実装するときに使用する goBack() も、navigation props直下にいるhelper method なので、同じ手法が使える。

reviewDetails

goBack() メソッドには引数はない。

公式ドキュメント: https://reactnavigation.org/docs/navigation-prop/#goback

エミュレーターでの反映はこちら👇

react-navigation-sample

まとめ

ここまでは、本当に基本的なReact Navigationを実装する手順です。

実際に皆さんが使用しているモバイルアプリには、もっと多くのコンテンツが、ナビゲーションには含まれていますね。

この記事はPart 1ですので、Part 2に、もう少し詳しいカスタマイズやオプションの詳細を書く予定です。

具体的には、異なるScreenごとにデータを渡したり、オプションを実装したりといった内容です。

まずは基本を抑えることが大切なので、公式ドキュメントと一緒に読みながら実装すると、最新バージョンで正しい情報が得られるので、必ず何かチュートリアルを参考に見る時でも、一緒に読むと正しい知識が得られておすすめです💡

v4からv5では、大きく違う部分、注意すべき内容を私自身のメモ書きも含め、まとめてみましたが、参考になれば幸いです。

冒頭でも書きましたが、2020年9月の時点では、まだReact Navigationの日本語ソース自体が少ないのと、最新のReact Native 5のソースも少なかったので、必要な方に届けば嬉しいです👍

では、

ちゅーす