React Navigationを使って、React Native WebでSPAを試してみた

2.4K Views

April 30, 21

スライド概要

2020/05/27 React Native Meetup

nabettu🍲NotionでWebサイトが作れるサービス開発中

@nabettu

スライド一覧

NoCodeサービス作ってます！

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

ChatGPTにどのアプリ上でも質問できるキーボードを作った時に困った事7選 @nabettu

nabettu🍲NotionでWebサイトが作れるサービス開発中 657

UE4で作成するUIと最適化手法【GAME CREATORS CONFERENCE '20】

ue4 ue-ui ue-optimize

エピックゲームズジャパン 314.9K

目指せ脱UE4初心者！？知ってると開発が楽になる便利機能を紹介 - DataAsset, Subsystem, GameplayAbility編 -

unreal engine ue4 unreal engine 4 historia game

株式会社ヒストリア 232K

UE4でマルチプレイヤーゲームを作ろう【CEDEC 2019】

ue4 cedec2019 ue-network ue-bp

エピックゲームズジャパン 200K

猫でも分かるUE4.22から入ったSubsystem【第4回 UE4何でも勉強会 in 東京 2020】

ue4 subsystem ue-bp ue-c++

エピックゲームズジャパン 141.1K

『FINAL FANTASY VII REMAKE』におけるプロファイリングと最適化事例【UNREAL FEST EXTREME 2021 SUMMER】

ue4 unreal fest unreal fest extreme 2021 summer ue-optimize ue-console

エピックゲームズジャパン 122.3K

各ページのテキスト

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

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

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

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

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

作ってます

React Nativeのルーティング何使ってますか？ 🍎 - wix/react-native-navigation 🍊 - aksonov/react-native-router-ﬂux 🍇 - react-navigation/react-navigation 🍈 - ReactTraining/react-router 🍌 - その他

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をサポートしたときに、それを使って３プラットフォーム対応アプリの本を書いてました - 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.

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