as

Settings
Sign out
Notifications
Alexa
亚马逊应用商店
AWS
文档
Support
Contact Us
My Cases
新手入门
设计和开发
应用发布
参考
支持
感谢您的访问。此页面目前仅提供英语版本。我们正在开发中文版本。谢谢您的理解。

Video Details Screen Navigation

Render Video Data

Now that we are passing data to VideoDetailsScreen, let's render the data.

  • Open VideoDetailScreen.tsx.
  • In the parameter list for the VideoDetailScreen component, destructure navigation and route, declaring them as type any.
const VideoDetailScreen = ({ navigation, route }: any) => {
  // Code for VideoDetailScreen
}
  • Define a new variable to capture the video from the route.
const video = route.params.video;
  • Update the source prop for ImageBackground, setting it to {{ uri: video.imgURL }}.

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

  • Replace "Video Title" and "Video Description" in the Text components with {video.title} and {video.description}.
<Text style={styles.videoTitle}>{video.title}</Text>
<Text style={styles.videoDescription}>{video.description}</Text>

Add the Navigation Buttons

Let's add in the buttons and wire up them up to allow Navigation.

  • Import the Button component we created.
  • Under the two text fields add a View.
  • Give the View a style prop of buttonContainer and add the following style to the style sheet:

 buttonContainer: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginLeft: 30,
    width: '18%',
  },
  • Within the View add the two Button components.
  <View style={styles.buttonContainer}>
    <Button/>
    <Button/>
  </View>

For the first Button:

  • Set the buttonText prop to be "Watch Button"
  • Set the pressFunction prop to be empty for now. In the next section we will set it to navigate to the new VideoPlaybackScreen
<Button
  buttonText="Watch Now"
  pressFunction={() => {} }
/>

For the second Button component:

  • Set the buttonText prop to be "Back"
  • Set the pressFunction prop to be {() => navigation.goBack()}. This will send us back to the LandingScreen, the previous screen in the stack.
<Button
  buttonText="Back"
  pressFunction={() => navigation.goBack()}
/>

The VideoDetailScreen.tsx code should look like this:

Copied to clipboard.


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="Back" 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;

  • Refresh the app and verify that you see the background image, title, and description.
  • Verify you can go back to the LandingScreen when you select the "Back" button. We'll test the "Watch Now" button in the next section.