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のキー/キーボードの矢印キーのいずれかを押すことでビデオカードにフォーカスを移動できます。


