启动VideoPlaybackScreen

开放Beta测试文档 作为预发布开放Beta测试的一项内容，亚马逊提供了此技术文档。随着亚马逊收到反馈并对功能进行迭代，所描述的这些功能可能会发生变化。有关最新功能的信息，请参阅发布说明。

将VideoPlaybackScreen添加到Stack.Navigator

现在有了VideoPlayback屏幕，需要将其添加到我们的Stack.Navigator中，以便我们可以将其作为导航的一部分进行访问。

打开App.tsx。
从屏幕导入VideoPlaybackScreen。

import { LandingScreen, VideoDetailScreen, VideoPlaybackScreen} from './screens';

添加一个名为VideoPlaybackScreen的新Stack.Screen，并将其设置为呈现新的VideoPlaybackScreen组件。

已复制到剪贴板。

<Stack.Navigator screenOptions={{ headerShown: false }}>
  <Stack.Screen name='LandingScreen' component={LandingScreen}/>
  <Stack.Screen name='VideoDetailScreen' component={VideoDetailScreen}/>
  <Stack.Screen name='VideoPlaybackScreen' component={VideoPlaybackScreen}/>
</Stack.Navigator>

导航到VideoPlaybackScreen

现在，当我们点击Watch Now（立即播放）按钮时，可以启动VideoPlaybackScreen。

打开VideoDetailScreen.tsx。
更新Watch Now按钮的pressFunction以导航到VideoPlayerScreen。
向导航赋予一个videoURL属性然后将其设置为videoURL的值。

 <Button
    buttonText="Watch Now"
    pressFunction={() => navigation.navigate('VideoPlaybackScreen', { videoURL: video.videoURL })}
 />

启动VideoPlaybackScreen

现在正在将数据传递给VideoPlaybackScreen，让我们来展示一下。

打开VideoPlaybackScreen.tsx。
向屏幕{ navigation, route }: any添加导航和路径属性。

const VideoPlaybackScreen = ({ navigation, route }: any) => {

将文本设置为route.params.videoURL。

<Text style={styles.playerPlaceholder}>{route.params.videoURL}</Text>

VideoPlaybackScreen.tsx中更新后的代码应如下所示：

已复制到剪贴板。

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

const VideoPlaybackScreen = ({navigation, route}: any) => {
  return (
    <View style={styles.playerContainer}>
      <Text style={styles.playerPlaceholder}>{route.params.videoURL}</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;

恭喜！您已经成功完成了Vega视频应用教程！🎉 您的Vega应用现在具有显示和播放视频的基本功能，可以在屏幕之间进行适当的导航。您已经为视频播放应用打下了坚实的基础。

前往下一页，看看如何继续您的Vega之旅。