VideoDetailsScreen导航 - Amazon Vega Docs

呈现视频数据

现在已经将数据传递至VideoDetailsScreen，我们来呈现数据。

打开VideoDetailScreen.tsx。
在VideoDetailScreen组件的参数列表中，解构navigation和route，将其声明为any类型。

const VideoDetailScreen = ({ navigation, route }: any) => {
  // VideoDetailScreen的代码
}

定义一个新变量来捕获route中的视频。

const video = route.params.video;

更新ImageBackground的source属性，将其设置为{{ uri: video.imgURL }}。

<ImageBackground
  source={{ uri: video.imgURL }}
  imageStyle={styles.image}
  style={styles.screenContainer}
>

将Text组件中的“Video Title”和“Video Description”替换为{video.title}和{video.description}。

<Text style={styles.videoTitle}>{video.title}</Text>
<Text style={styles.videoDescription}>{video.description}</Text>

添加导航按钮

我们添加按钮并将它们连接起来以允许导航。

导入我们创建的Button组件。
在两个文本字段下方添加一个View。
向View赋予buttonContainer样式属性，并将以下样式添加到样式表中：

 buttonContainer: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginLeft: 30,
    width: '18%',
  },

在View中添加两个按钮组件。

  <View style={styles.buttonContainer}>
    <Button/>
    <Button/>
  </View>

对于第一个按钮：

将buttonText属性设置为“Watch Button”（观看按钮）。
暂时将pressFunction属性设置为空。在下一部分，我们会将其设置成导航到新的VideoPlaybackScreen。

<Button
  buttonText="Watch Now"
  pressFunction={() => {} }
/>

对于第二个Button组件：

将buttonText属性设置为Back（后退）。
将pressFunction属性设置为{() => navigation.goBack()}。这将使我们回到LandingScreen，即堆栈中的上一个屏幕。

<Button
  buttonText="Back"
  pressFunction={() => navigation.goBack()}
/>

VideoDetailScreen.tsx代码的形式如下所示：

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

const VideoDetailScreen = ({navigation, route}: any) => {
  const video = route.params.video;

  return (
    <ImageBackground
      source={{uri: video.imgURL}}
      imageStyle={styles.image}
      style={styles.screenContainer}>
      <Text style={styles.videoTitle}>{video.title}</Text>
      <Text style={styles.videoDescription}>{video.description}</Text>
      <View style={styles.buttonContainer}>
        <Button
          buttonText="Watch Now"
          pressFunction={() =>
            navigation.navigate('VideoPlaybackScreen', {
              videoURL: video.videoURL,
            })
          }
        />
        <Button buttonText="返回" pressFunction={() => navigation.goBack()} />
      </View>
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  image: {
    opacity: 0.2,
  },
  screenContainer: {
    display: 'flex',
    height: '100%',
    justifyContent: 'center',
  },
  videoTitle: {
    fontSize: 50,
    color: 'white',
    fontWeight: '700',
    margin: 30,
  },
  videoDescription: {
    color: 'white',
    fontSize: 30,
    margin: 30,
  },
  buttonContainer: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginLeft: 30,
    width: '18%',
  },
});

export default VideoDetailScreen;

刷新应用并验证您是否看到背景图片、标题和描述。
验证选择Back按钮后是否可以返回到LandingScreen。我们将在下一部分中测试Watch Now（立即播放）按钮。

​呈现视频数据

​添加导航按钮

呈现视频数据

添加导航按钮