Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Navigation v7 で導入される Static API / React Navigation v7 Static API

React Navigation v7 で導入される Static API / React Navigation v7 Static API

React Native Meetup #16 の発表資料です。

Yuki Sato

June 14, 2024
Tweet

Other Decks in Technology

Transcript

  1. 4 4 技術スタック TypeScript フロントエンド React Native バックエンド Go Python

    インフラ AWS Terraform Datadog データ基盤 デザイン その他 BigQuery Redash Figma Storybook Github GitHub Actions
  2. 6 6 弊チームが抱えている課題 • バンドルカードアプリでは React Navigation を使っている • Dynamic

    API が導入された v5 へのアップデート時にコンポーネントベースへ の書き換えを後回しにした • 互換性を保つための @react-navigation/compat を使用しているがすでに パッケージは削除されているので、後がなくなっていた 背景
  3. 7 7 Static API が来た • React Navigation 7 で新しい

    Static API 追加される • Dynamic API の利点を活かしつ不評であったコードベースの簡素化のために 作られたもの • v4 以前の Static API とは別物だが、インターフェイスは似ている • 初期のプロトタイプはかなり前から開発されていたが、Blog が出たり、Deep Link 周りの機能が拡充されたタイミングだったので、使えるものなのかを見 てみた 背景
  4. 9 9 Navigatorの定義 どう変わったのか • createStackNavigator などの関数のオプションとして screens の設定を渡 せるようになった

    • 構文だけ見てもでもだいぶシンプルに戻っている • 作成したNavigator を createStaticNavigation という関数に渡している
  5. 11 11 TypeScriptの型定義 • Dynamic API で パラメータの型定義は Navigator 定義とは別の場所で行う

    • Static APIの場合だとNavigator定義そのものから型を生成できる どう変わったのか
  6. 15 15 その他 • Navigatorの定義に条件を記述して認証付きの画面を宣言的に定義できるように なった • Static API をルートにしてDynamic

    APIを使用したり、その逆も可能 ◦ 相互に変換するためのhelperが用意されている(後述) どう変わったのか
  7. 16 16 コンポーネントへの変換 • Static API は Dynamic APIを置き換えるものではなくDynamic APIの上に実

    装されている > The static API it’s an additional optional API. The dynamic API isn’t going away and will remain a first-class API of React Navigation. In fact, the static API is written entirely on top of the dynamic API. どう実現されているのか
  8. 20 20 旧Static APIからの移行 • Dynamic API は v5 移行時の課題の一つとして単純なコード量の増加で、コス

    トがかかる部分 ◦ Static API の導入により置き換えのコストが大幅に減ることが見込める • また、@react-navigation/compat パッケージと異なり、共存するものであ ることから一定安心して使用できるはず まとめ
  9. 21 21 Expo Routerとの差分 • TypeScriptの観点だと… ◦ 自動生成された型がつく😥 • Deep

    Linkの観点だと… ◦ こちらも自動生成される😥 正直なところ、優位性を持つほどの変更とはならない。 とはいえ純粋なネイティブアプリをターゲットとしたアプリを作成している状況な らば、差分は少し縮まった。 まとめ