VideoCardへのナビゲーションの有効化

VideoCardをフォーカス可能かつ押下可能にする方法

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()ハンドラーを設定する必要があります。

VideoCardにpressFunctionという新しいプロパティを渡し、型としてFunctionを指定します。
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()関数を呼び出すように設定します。
TouchableOpacityにonBlurプロパティを追加し、値を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という2つの新しいスタイルプロパティを作成し、それぞれのスタイルを以下のように設定します。

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;

アプリを更新します。これで、以下のビデオに示すように、D-Padのキー／キーボードの矢印キーのいずれかを押すことでビデオカードにフォーカスを移動できます。

​VideoCardをフォーカス可能かつ押下可能にする方法

VideoCardをフォーカス可能かつ押下可能にする方法