VideoPlaybackScreenの作成

次にアプリに追加するのは、ビデオプレーヤーを起動する機能です。このチュートリアルでは、お好みのビデオプレーヤーコンポーネントをホストできる専用のVideoPlaybackScreenを作成します。W3C Media APIのクロスプラットフォーム互換性と標準化されたインターフェイスの使用をお勧めしますが、要件を満たすサポート対象のプレーヤーは自由に統合できます。

screensフォルダにVideoPlaybackScreen.tsxという名前の、新しいファイルを作成します。

src/
├── components/
│   ├── Header.tsx
│   ├── VideoCard.tsx
│   └── index.ts
├── screens
│   ├── LandingScreen.tsx
│   ├── VideoDetailScreen.tsx
│   ├── VideoPlaybackScreen.tsx
│   └── index.ts
└── App.tsx

VideoPlaybackScreen.tsxを開き、「react-native」からReact、View、StyleSheetをインポートするimportステートメントと、Vega VideoPlayerコンポーネントを追加します。

import React from 'react';
import { View, StyleSheet } from 'react-native';

VideoPlaybackScreenコンポーネントを作成します。これはViewでラップされたプレースホルダーテキスト要素を返します。
VideoPlaybackScreenをエクスポートします。
VideoPlaybackScreenアロー関数の後に、stylesというStyleSheetを作成します。
playerContainerとplayerPlaceholderというスタイルを追加し、スタイルプロパティをそれぞれViewとTextに割り当てます。

const VideoPlaybackScreen = () => {
  return (
    <View>
      <Text>プレイヤープレースホルダー<Text/>
    </View>
  );
}

const styles = StyleSheet.create({
  playerContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }
  playerPlaceholder:{
    color: 'white'
    fontSize: 30,
  }
});

export default VideoPlaybackScreen;

VideoPlaybackScreenの終了

VideoPlaybackScreenからLandingScreenに戻る手段を用意する必要があります。実際には、ユーザーはリモコンの [戻る] ボタンを使用して戻る（またはD-Padで「上」に移動して戻る）ことができるようになります。ただし、ここでは基本的な [戻る] ボタンを画面上に作成します。

「戻る」という名前のButtonを含むViewを追加します
ボタンのonPressプロパティをnavigation.goBack()を呼び出すアロー関数に設定します。

<View>
  <Button title="戻る" onPress={() => navigation.goBack()} />
</View>

ViewにbuttonContainerのスタイルプロパティを指定します。
次の値を使用してbuttonContainerをStyleSheetに追加します。

const styles = StyleSheet.create({
  buttonContainer: {
    width: 100,
    position: 'absolute',
    top: 10,
    left: 10,
  },
});

VideoPlaybackScreenのエクスポート

index.tsにVideoPlaybackScreenをエクスポートすることを忘れないでください

import LandingScreen from './LandingScreen';
import VideoDetailScreen from './VideoDetailScreen'
import VideoPlaybackScreen from './VideoPlaybackScreen'

export {
    LandingScreen,
    VideoDetailScreen,
    VideoPlaybackScreen
}

VideoPlaybackScreen.tsxのコードは次のようになります。

import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
import {Button} from '../components';

const VideoPlaybackScreen = ({navigation}: any) => {
  return (
    <View style={styles.playerContainer}>
      <Text style={styles.playerPlaceholder}>プレイヤープレースホルダー</Text>
      <View style={styles.buttonContainer}>
        <Button buttonText="戻る" pressFunction={() => navigation.goBack()} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  playerContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonContainer: {
    width: 100,
    position: 'absolute',
    top: 10,
    left: 10,
  },
  playerPlaceholder: {
    color: 'white',
    fontSize: 30,
  },
});

export default VideoPlaybackScreen;

​VideoPlaybackScreenの作成

​VideoPlaybackScreenの終了

​VideoPlaybackScreenのエクスポート

VideoPlaybackScreenの作成

VideoPlaybackScreenの終了

VideoPlaybackScreenのエクスポート