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

React Navigationを使って React Native WebでSPAを試してみた ~ React Native Meetup 2020/5/29 ~

React Navigationを使って React Native WebでSPAを試してみた ~ React Native Meetup 2020/5/29 ~

React Native Meetup #10での登壇資料です。

【目次】
- 自己紹介と最近作っているもの
- 画面遷移ライブラリなに使ってますか?
- React Navigationのアップデート内容と使い方
- ルーティングの指定方法
- Deeplinkとの併用
- Linkコンポーネントの登場
- その他のアップデート

tatsuaki watanabe

May 29, 2020
Tweet

More Decks by tatsuaki watanabe

Other Decks in Technology

Transcript

  1. 株式会社クリモ CTO 渡邊達明
    React Navigationを使って
    React Native WebでSPAを試してみた
    ~ React Native Meetup 2020/5/29 ~

    View full-size slide

  2. ◉ 自己紹介と最近作っているもの
    ◉ 画面遷移ライブラリなに使ってますか?
    ◉ React Navigationのアップデート内容と使い方
    ○ ルーティングの指定方法
    ○ Deeplinkとの併用
    ○ Linkコンポーネントの登場
    目次

    View full-size slide

  3. ◉ 渡邊 達明(わたなべ たつあき)
    ◉ Twitter,GitHub: @nabettu
    ◉ 富士通株式会社→面白法人カヤック→独立
    ◉ 妻(代表)と二人で法人
    ◉ ネイティブアプリ(React Native with Expo)& Webフロント
    (Vue.js, React.js)& Firebase周りが専門です
    自己紹介

    View full-size slide

  4. NTTコミュニケーションズ
    社内ベンチャー発
    リアルタイムスポーツ実況解説アプリ
    ブンデスリーガの配信始めます!
    SpoLive

    View full-size slide

  5. tabmemo
    タブで仕分けできるメモアプリ

    View full-size slide

  6. 作ってます

    View full-size slide

  7. - wix/react-native-navigation
    - aksonov/react-native-router-flux
    - react-navigation/react-navigation
    - ReactTraining/react-router
    - その他
    React Nativeのルーティング何使ってますか?

    View full-size slide

  8. - wix/react-native-navigation
    - aksonov/react-native-router-flux
    - react-navigation/react-navigation
    - ReactTraining/react-router
    - その他
    今日はReact Navigationについてのお話をします
    React Nativeのルーティング何使ってますか?

    View full-size slide

  9. React Navigation on the Web
    公式ブログ
    https://reactnavigation.org/blog/2020/05/16/web-supp
    ort/

    View full-size slide

  10. React Navigation on the Web
    - 前から React Native Webでの利用は自体はできたけど、
    画面が変わるだけでURLも変わらず、リロードしたら状態
    がすべてリセットされてました
    - 個人的にExpoがv34からWebをサポートしたときに、それ
    を使って3プラットフォーム対応アプリの本を書いてました
    - https://nabettu.booth.pm/items/1569367
    今回はその当時からのアップデート内容について発表します

    View full-size slide

  11. 今回のアップデート内容と
    実際の利用方法

    View full-size slide

  12. SPA的な”普通の”ルーティングが
    できるようになりました!
    - URLでルーティングを保持できるようになった!
    - navigation.navigate実行時に自動で↑のURLが
    更新されるようになった!
    - historyのpush/popが動くようになった!

    View full-size slide

  13. ルーティングの指定方法
    React Navigation v5からの書き方でつけてたname
    と同じkeyでlinkingを指定すると、自動でURLを変更
    してくれます
    - パラメータもURLに含めたい場合にはコロンで入
    れるだけ
    - URLに載せたい情報だけをパースしたりもできる
    (stringifyやparseを指定)

    View full-size slide

  14. ルーティングの指定方法

    View full-size slide

  15. これらのルーティングとdeeplinkを
    複合的に使えるようになった
    - ネイティブとアプリ両方を作ってると必要になって
    くるdeeplink
    - 特別な実装をしなくても、deeplinkのURLを指定
    するだけで実装できます!
    ←ここんとこ

    View full-size slide

  16. Linkコンポーネントの登場
    ~ パスを指定してWebのリンクっぽく書ける
    - 今までのReact NavigationではWebのaタグが使え
    ず、リンクにhref属性がつかなかった
    - 「右クリックで別タブで開く」とかが使えるセマンティッ
    クな書き方ができるように
    - Navigation.navigate無しで遷移できる!
    ※ただ、現状のはテキスト専用になっており、ボタンなどに設定できな
    いので注意

    View full-size slide

  17. その他細かいアップデート
    アドレスバーが隠れるように&ドロアーメニュー

    View full-size slide

  18. サンプルとデモ
    - サンプルサイト
    https://upgradeexpo37navi5--telopmaker-sampl
    e.netlify.app/
    - サンプルリポジトリ
    https://github.com/nabettu/telopmaker-sample/t
    ree/upgradeExpo37Navi5

    View full-size slide

  19. 質問あればTwitterでも
    https://twitter.com/nabettu
    YouTubeやコミュニティSlackでどうぞ
    Thanks!

    View full-size slide