f:id:kasssssy:20200531135218p:plain

はじめに

React NativeのWebViewで表示しているブラウザの画面遷移をiPhoneのようにスライドインで表現する方法です。
↓こんな感じです f:id:kasssssy:20200612172256g:plain

環境

サンプルなのでApp.tsxに全て書いています。
少し見辛いかもしれませんが基本WebViewScreenだけ見ていただければ大丈夫です。

やりたいことは、ブラウザ内でリンクが押されたら(ロードされたら)新しいスクリーンにブラウザを表示するだけです。

※8行目でanyを使っていますが、サンプルコードなので型を定義してないだけです。

15行目：表示するURLを指定しています。

17行目：onShouldStartLoadWithRequest()は、trueを返すと画面のロードが行われ、falseを返すと画面のロードを止めることができます。

18行目：最初、画面が表示された時のロードは正常に行われるようにしています。画面のロードは最初に表示するときと画面遷移をするときにも発生するため判断できるようしています。ここの分岐がないと永遠に新しいスクリーンが生成されるという怖い状況になります。

21行目：新しいスクリーンを作成して遷移先のページを表示します。

24行目：onLoad()は、画面のロードが完了すると実行されます。

サンプルコードはGitHubにあげました。
GitHub - kashimura0001/web-view-sample

この書き方だと、HTTPメソッドがGET以外だと正常に動かないです😭
どのような処理が行われるのか分かっているサイトで使うにはいいかもしれませんが、それ以外の場合は他に工夫する必要がありそうです。