浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React Native】「react-native-video」ライブラリで動画をフルスクリーンで表示する

動画ファイルの再生機能を React Native アプリに実装した際、再生する動画をフルスクリーンで表示したかったのでその実装方法についてまとめ。
ライブラリのオプションで fullscreen とありましたが、こちらは私のプロジェクトでは正しく動作しないようだったので、別の方法で実現する方法です。

ライブラリの GitHub ページはこちら。

GitHub – react-native-video/react-native-video: A <video /> component for react-native
https://github.com/react-native-video/react-native-video

なお、まだ iOS でしか検証していません。
おそらく問題ないとは思いますが、Android は未検証なので、もしレイアウトが崩れた場合は適宜調整してください。

 

サンプルコードは下記の通りです。

import { StyleSheet, Dimensions } from 'react-native';
import { getInset } from 'react-native-safe-area-view';
import VideoPlayer from 'react-native-video-player';

const topPadding = getInset('top', false);
const bottomPadding = getInset('bottom', false);
const windowHeight = Dimensions.get('window').height;
const styles = StyleSheet.create({
  video: {
    width: '100%',
    height: windowHeight - topPadding - bottomPadding,
  },
});
<VideoPlayer
  video={videoSource}
  resizeMode='contain'
  thumbnail={{ uri: this.state.thumbnail }}
  style={styles.video} />

設定は至って単純で <VideoPlayer />style で幅と高さを指定しているだけです。
なおこの時、横幅は端末の横幅 100% で問題ありませんが、高さも 100% にしてしまうと、iPhoneX 以降の上下のノッチ部分に干渉してしまうので、その分の高さを引くようにしています。
なお、端末画面の高さは、サンプルコード 7行目でも記載している通り、Dimensions.get('window').height で取得できます。
またノッチの高さについては上記のサンプルコードの 5、6行目のように react-native-safe-area-viewgetInset を使えば取得できます。
実装する内容は以上です!

まだ微調整は少し必要ですが、機能的にはこれで問題ないと思います!
今後、Android の見た目も見つつ、細部を調整していく予定です。

 

以上、React Native の react-native-video ライブラリで、動画をフルスクリーン表示する方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)