as

Settings
Sign out
Notifications
Alexa
Amazonアプリストア
AWS
ドキュメント
Support
Contact Us
My Cases
開発
設計と開発
公開
リファレンス
サポート

VideoPlaybackScreenの作成

VideoPlaybackScreenの作成

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を作成します。
  • playerContainerplayerPlaceholderというスタイルを追加し、スタイルプロパティをそれぞれViewTextに割り当てます。
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;