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を作成します。 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;

