创建VideoPlaybackScreen

我们向要添加到应用的下一个功能是启动视频播放器功能。在本教程中，您将创建一个专用VideoPlaybackScreen来托管您的首选视频播放器组件。我们建议使用W3C媒体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”和Vega VideoPlayer组件中用于React、View和StyleSheet的导入语句。

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的方法。实际上，客户能够使用遥控器上的Back（后退）按钮来返回（或在方向键上按“向上”然后选择返回）。但是现在，我们将在屏幕上创建一个基本的Back按钮。

添加包含按钮的View，该按钮名为“Back”（返回）
将按钮的onPress属性设置为调用navigation.goBack()的箭头函数。

<View>
  <Button title="Back" 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}>Player Placeholder</Text>
      <View style={styles.buttonContainer}>
        <Button buttonText="Back" 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