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コンポーネントの登場
- その他のアップデート

17d7df2ee1ecb4ddf6a0ac1261e14bf4?s=128

tatsuaki watanabe

May 29, 2020
Tweet

Transcript

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

    Native Meetup 2020/5/29 ~
  2. ◉ 自己紹介と最近作っているもの ◉ 画面遷移ライブラリなに使ってますか? ◉ React Navigationのアップデート内容と使い方 ◦ ルーティングの指定方法 ◦

    Deeplinkとの併用 ◦ Linkコンポーネントの登場 目次
  3. ◉ 渡邊 達明(わたなべ たつあき) ◉ Twitter,GitHub: @nabettu ◉ 富士通株式会社→面白法人カヤック→独立 ◉

    妻(代表)と二人で法人 ◉ ネイティブアプリ(React Native with Expo)& Webフロント (Vue.js, React.js)& Firebase周りが専門です 自己紹介
  4. NTTコミュニケーションズ 社内ベンチャー発 リアルタイムスポーツ実況解説アプリ ブンデスリーガの配信始めます! SpoLive

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

  6. 作ってます

  7. - wix/react-native-navigation - aksonov/react-native-router-flux - react-navigation/react-navigation - ReactTraining/react-router - その他

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

    今日はReact Navigationについてのお話をします React Nativeのルーティング何使ってますか?
  9. React Navigation on the Web 公式ブログ https://reactnavigation.org/blog/2020/05/16/web-supp ort/

  10. React Navigation on the Web - 前から React Native Webでの利用は自体はできたけど、

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

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

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

    URLに載せたい情報だけをパースしたりもできる (stringifyやparseを指定)
  14. ルーティングの指定方法

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

  16. Linkコンポーネントの登場 ~ パスを指定してWebのリンクっぽく書ける - 今までのReact NavigationではWebのaタグが使え ず、リンクにhref属性がつかなかった - 「右クリックで別タブで開く」とかが使えるセマンティッ クな書き方ができるように

    - Navigation.navigate無しで遷移できる! ※ただ、現状のはテキスト専用になっており、ボタンなどに設定できな いので注意
  17. その他細かいアップデート アドレスバーが隠れるように&ドロアーメニュー

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

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