启用VideoCard导航 - Amazon Vega Docs

让VideoCard可设定焦点且可按下。

现在，我们需要使VideoCard可设定焦点并且可按下，以使我们能够与其进行交互并导航到它们。我们将使用一个名为TouchableOpacity的组件来做到这一点。

打开VideoCard.tsx，然后从’react-native’中导入TouchableOpacity。

import { StyleSheet, Text, TouchableOpacity, Image, View} from 'react-native';

将View元素替换为TouchableOpacity。保留style属性。

 <TouchableOpacity 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>
  </TouchableOpacity >

接下来要让VideoCard处于可按下状态，我们需要给它添加一个onPress() 处理程序。

将一个名为pressFunction的新属性传递给VideoCard并赋予它某个类型函数。
将onPress属性添加到TouchableOpacity并设置其值以调用新的pressFunction。

Interface IProps {
  title: string;
  imgURL: string;
  description: string;
  pressFunction: Function;
}

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

return (
  <TouchableOpacity
      style={styles.videoCardContainer}
      onPress={() => pressFunction()}
  >
      <Image
        style={styles.videoImage}
        source={{uri: imgURL}}
      />
      <View style={styles.videoTextContainer}>
          <Text style={styles.videoTitle}>{title}</Text>
          <Text style={styles.videoDescription}>
            {description}
          </Text>
      </View>
  </TouchableOpacity >
 );
};

接下来，我们需要让用户清楚地知道选择了哪个视频。我们可以通过向TouchableOpacity添加onFocus() 和onBlur() 属性来做到这一点。

从react中导入useState，并使用状态focused和函数setFocused对其进行初始化。
将focused的值初始化为false。

const VideoCard = ({ title, imgURL, description, pressFunction}: IProps) => {
    const [focused, setFocused] = useState(false);
}

向TouchableOpacity添加一个onFocus属性，然后将其设置为调用值为true的setFocused()函数。
将onBlur属性添加到TouchableOpacity，然后将其设置为调用值为false的setFocused()函数。

<TouchableOpacity
    style={styles.videoCardContainer}
    onPress={() => pressFunction()}
    onFocus={() => setFocused(true)}
    onBlur={() => setFocused(false)}
>
    <Image
      style={styles.videoImage}
      source={{ uri: imgURL }}
    />
    <View style={styles.videoTextContainer}>
        <Text style={styles.videoTitle}>{title}</Text>
        <Text style={styles.videoDescription}>
          {description}
        </Text>
    </View>
</TouchableOpacity >

最后，我们需要添加样式来突出显示所聚焦的卡片。

按如下方式修改videoCardContainer。
创建两个名称分别为focused和unfocused的新样式属性，并按如下方式设置其样式。

const styles = StyleSheet.create({
  ...
   videoCardContainer: {
    height: 400,
    width: 350,
    margin: 10,
    borderRadius: 5,
  },
   unfocused:{
    borderWidth: 1,
    borderColor: 'white',
  },
  focused: {
    borderWidth: 5,
    borderColor: "yellow",
  }
});

修改TouchableOpacity以根据focused的值添加新的样式属性（如果为true则为focused，如果为false则为unfocused）。

style={[styles.videoCardContainer, focused ? styles.focused : styles.unfocused]}

VideoCard.tsx代码应该如下所示：

import React, { useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, Image, View } from 'react-native';


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

const VideoCard = ({ title, imgURL, description, pressFunction }: IProps) => {
  const [focused, setFocused] = useState(false);

  return (
    <TouchableOpacity
      style={[
        styles.videoCardContainer,
        focused ? styles.focused : styles.unfocused
      ]}
      onPress={() => pressFunction()}
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
    >
      <Image style={styles.videoImage} source={{ uri: imgURL }} />
      <View style={styles.videoTextContainer}>
        <Text style={styles.videoTitle}>{title}</Text>
        <Text style={styles.videoDescription}>{description}</Text>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  videoCardContainer: {
    height: 400,
    width: 550,
    margin: 10,
    borderRadius: 5,
  },
  unfocused: {
    borderWidth: 1,
    borderColor: 'white',
  },
  focused: {
    borderWidth: 5,
    borderColor: 'yellow',
  },
  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可设定焦点且可按下。