Stack.NavigatorにVideoPlaybackScreenを追加
これでVideoPlaybackScreenができたので、Stack.Navigatorに追加して、ナビゲーションの一部としてアクセスできるようにする必要があります。App.tsxを開きます。- screensからVideoPlaybackScreenをインポート
- VideoPlaybackScreenという新しい
Stack.Screenを追加し、新しいVideoPlaybackScreenコンポーネントをレンダリングするように設定します。
VideoPlaybackScreenへの移動
これで [今すぐ観る] ボタンをクリックしたとき、VideoPlaybackScreenを起動できるようになりました。VideoDetailScreen.tsxを開きます。- [今すぐ観る] ボタンのpressFunctionを、VideoPlayerScreenに移動するよう更新します。
- navigationに
videoURLのプロパティを割り当て、videoURLの値に設定します。
VideoPlaybackScreenの起動
VideoPlaybackScreenにデータを渡したので、表示してみましょう。VideoPlaybackScreen.tsxを開きます。- 画面にnavigationプロパティとrouteプロパティ
{ navigation, route }: anyを追加します。
- Textを
route.params.videoURLに設定します。
VideoPlaybackScreen.tsxの更新後のコードは次のようになります。

URIが表示されたビデオ画面

