创建视频详情屏幕 - Amazon Vega Docs

定义VideoDetailScreen

在添加Navigation程序包之前，我们需要导航至某个地方并创建视频详情屏幕。它将有背景图片、视频标题、视频描述，最后还有一个播放和后退按钮。

在screens文件夹下创建一个名为VideoDetailScreen.tsx的新文件。
打开文件并从’react-native’导入React以及必要的组件。在本例中，我们需要ImageBackground、Text、View和StyleSheet。
创建一个名为VideoDetailScreen的箭头函数并将其导出。
向VideoDetailScreen添加一条包含ImageBackground标签的返回语句，该语句将是父元素。
向ImageBackground添加一个source属性并将其硬编码为{uri: 'placeholder'}。
在ImageBackground中添加两个Text元素，一个用于标题，一个用于描述。将文本“视频标题”添加到第一个元素，将“视频描述”添加到另一个元素。

import React from 'react';
import {ImageBackground, Text, View, StyleSheet} from 'react-native';

const VideoDetailScreen = () => {
  return (
    <ImageBackground
       source={{
        uri: 'placeholder',
      }}>
      <Text>视频标题</Text>
      <Text>视频描述</Text>
    </ImageBackground>
  );
};

export default VideoDetailScreen;

添加样式

我们来添加一些样式。

创建一个名为styles的StyleSheet并将其添加到VideoDetailScreen箭头函数之后。
使用以下值将image、screenContainer、videoTitle、videoDescription样式添加到StyleSheet。

const styles = StyleSheet.create({
  image: {
    opacity: 0.2
  },
  screenContainer: {
    display: 'flex',
    height: '100%',
    justifyContent: 'center',
    padding: 10
  },
  videoTitle: {
    fontSize: 40,
    color: 'white',
    fontWeight: '700'
  },
  videoDescription: {
    color: 'white',
    fontSize: 20
  },
});

将样式添加到其对应的元素中。

const VideoDetailScreen = () => {
  return (
    <ImageBackground
      source={{
        uri: 'placeholder',
      }}
      imageStyle={styles.image}
      style={styles.screenContainer}>
      <Text style={styles.videoTitle}>视频标题</Text>
      <Text style={styles.videoDescription}>视频描述</Text>
    </ImageBackground>
  );
  
};

下面显示了VideoDetailScreen.tsx代码的形式：

import React from 'react';
import { ImageBackground, Text, View, StyleSheet } from 'react-native';

const VideoDetailScreen = () => {
  return (
    <ImageBackground
      source={{
        uri: 'placeholder',
      }}
      imageStyle={styles.image}
      style={styles.screenContainer}>
      <Text style={styles.videoTitle}>视频标题</Text>
      <Text style={styles.videoDescription}>视频描述</Text>
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  image: {
    opacity: 0.2
  },
  screenContainer: {
    display: 'flex',
    height: '100%',
    justifyContent: 'center',
    padding: 10
  },
  videoTitle: {
    fontSize: 50,
    color: 'white',
    fontWeight: '700'
  },
  videoDescription: {
    color: 'white',
    fontSize: 30
  }
});

export default VideoDetailScreen;

更新screens文件夹中的索引文件

最后一步是将此屏幕添加到screens文件夹中的index.ts文件。

在screens文件夹中打开index.ts。
将VideoDetailScreen添加到导入和导出语句中。

更新后的index.ts文件应如下所示：

import LandingScreen from './LandingScreen';
import VideoDetailScreen from './VideoDetailScreen';


export {
    LandingScreen,
    VideoDetailScreen
}

​定义VideoDetailScreen

​添加样式

​更新screens文件夹中的索引文件

定义VideoDetailScreen

添加样式

更新screens文件夹中的索引文件