传递属性 - Amazon Vega Docs

现在我们有了组件和屏幕，我们需要对其进行更新，这样它就可以呈现传递给它的数据，而不是显示硬编码的信息。在React Native中，一种在组件之间传递数据的方法叫做prop。 prop（properties的简写，即属性）是传递给React组件的参数。您可以向函数中添加属性并引用属性变量来访问参数，如下所示：

const MyComponent = props => {
  console.log(props.arg1);
};

访问数据的另一种方法是从属性中解构您需要的参数：

const MyComponent = ({arg1}) => {
  console.log(arg1);
};

我们将在本指南中使用这两种方法。

向VideoCard添加属性

让我们首先向VideoCard添加属性。第一步是在TypeScript中定义属性的数据类型。在TypeScript中，接口的作用是命名和定义这些类型，是在代码中定义合约以及在项目外部定义代码合约的有效方法。我们来为属性定义一个接口。

打开VideoCard.tsx，在导入语句下方插入一个声明属性类型的接口。

interface IProps {
  title: string;
  imgURL: string;
  description: string;
}

在VideoCard的箭头函数中，解构接口中的每个字段。
添加:IProps以强制执行对象中每个字段的类型。

const VideoCard = ({title, imgURL, description}: IProps) => {};

将硬编码值替换为其相应值。

<View style={styles.videoCardContainer}>
  <Image style={styles.videoImage} source={{uri: imgURL}} />
  <View style={styles.videoTextContainer}>
    <Text style={styles.videoTitle}>{title}</Text>
    <Text style={styles.videoDescription}>{description}</Text>
  </View>
</View>

更新后的VideoCard.tsx应该如以下所示。

import * as React from 'react';
import {StyleSheet, Text, View, Image} from 'react-native';

interface IProps {
  title: string;
  imgURL: string;
  description: string;
}

const VideoCard = ({title, imgURL, description}: IProps) => {
  return (
    <View style={styles.videoCardContainer}>
      <Image style={styles.videoImage} source={{uri: imgURL}} />
      <View style={styles.videoTextContainer}>
        <Text style={styles.videoTitle}>{title}</Text>
        <Text style={styles.videoDescription}>{description}</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  videoCardContainer: {
    height: 400,
    width: 550,
    borderWidth: 1,
    borderColor: 'white',
    borderRadius: 5,
  },
  videoTextContainer: {
    height: '25%',
    display: 'flex',
    justifyContent: 'space-around',
    padding: 10,
  },
  videoImage: {
    height: '75%',
  },
  videoTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: 'white',
  },
  videoDescription: {
    color: 'white',
  },
});

export default VideoCard;

将属性传递至VideoCard

现在我们需要更新登录屏幕以将值传递给VideoCard。

打开LandingScreen.tsx。
将title、description和imgURL传递至VideoCard组件。将title更改为“My Video”（我的视频），将description更改为“My Video Description”（我视频的描述），以便更易于验证我们是否传递了属性。

更新后的LandingScreen.tsx应该如以下所示：

import * as React from 'react';
import Header from '../components/Header';
import VideoCard from '../components/VideoCard';


const LandingScreen = () => {
  return (
    <>
      <Header />
      <VideoCard
        title="My Video"
        description="My Video Description"
        imgURL="https://le1.cdn01.net/videos/0000169/0169322/thumbs/0169322__002f.jpg"
      />
    </>
  );
};

export default LandingScreen;

如果需要，点击“play”（播放）或按“r”重新加载应用，随即会出现使用了更新值的视频卡！

​向VideoCard添加属性

​将属性传递至VideoCard

向VideoCard添加属性

将属性传递至VideoCard