フォーカス可能なボタンの作成

VideoDetailScreenにはフォーカス可能なボタンを2つ追加する必要があるため、独自のボタンコンポーネントを作成します。これにより、コードの重複がなくなり、ボタンをアプリ全体で再利用できます。

Buttonコンポーネントの定義

componentsフォルダにButton.tsxという新しいファイルを作成します。
「react」からReactとuseStateをインポートします。
「react-native」からStyleSheet、Text、TouchableOpacityをインポートします。
pressFunctionとbuttonTextという2つの引数を取るButtonというアロー関数を作成します。
インターフェイスの各引数を分割し、:IPropsを追加してオブジェクトの各引数に型を適用します。pressFunctionは関数になり、buttonTextは文字列になります。

importステートメントの下に、プロパティの型を宣言するインターフェイスを作成します。

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

export interface IProps {
  pressFunction: Function;
  buttonText: String;
}

const Button = ({ pressFunction, buttonText }: IProps) => { };

空のフラグメントを追加し、その中にTouchableOpacity要素を追加します。

Buttonを押下可能にするには、onPress()を指定する必要があります。

onPressプロパティをTouchableOpacityに追加し、pressFunctionを呼び出すようにその値を設定します。
TouchableOpacity内にTextコンポーネントを追加し、buttonTextの値を取り込むように設定します。

const Button = ({ pressFunction, buttonText }: IProps) => {

  return (
    <>
      <TouchableOpacity onPress={() => pressFunction()}>
        <Text>{buttonText}</Text>
      </TouchableOpacity>
    </>
  );
};

次に、ボタンが選択されていることをユーザーにわかりやすく示すため、TouchableOpacityにonFocus()プロパティとonBlur()プロパティを追加しましょう。

reactからuseStateをインポートし、focusedの状態とsetFocusedの関数で初期化します。
focusedの値をfalseに初期化します。

const Button = ({ pressFunction, buttonText }: IProps) => {
    const [focused, setFocused] = useState(false);
}

TouchableOpacityにonFocusプロパティを追加し、値をtrueにしてsetFocused()関数を呼び出すように設定します。
TouchableOpacityにonBlurプロパティを追加し、値をfalseにしてsetFocused()関数を呼び出すように設定します。

Button.tsxのコードは次のようになります。

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

export interface IProps {
  pressFunction: Function;
  buttonText: String;
}

const Button = ({ pressFunction, buttonText }: IProps) => {
  const [focus, setFocused] = useState(false);

  return (
    <>
      <TouchableOpacity
        onPress={() => pressFunction()}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}>
        <Text>{buttonText}</Text>
      </TouchableOpacity>
    </>
  );
};

スタイルの追加

次に、スタイルを追加しましょう。

stylesというStyleSheetを作成し、Button関数の後に追加します。
次の値でbuttonContainer、buttonText、focusedの各スタイルをStyleSheetに追加します。

const styles = StyleSheet.create({
  buttonContainer: {
    backgroundColor: '#FF9900',
    padding: 10,
    width: 150,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonText: {
    fontSize: 20,
  },
  focused: {
    borderWidth: 5,
    borderColor: 'yellow',
  },
});

TouchableOpacityには、focusedの値に応じたスタイルプロパティがあります。

TouchableOpacityにbuttonInnerContainerのスタイルプロパティとfocusedの条件付きスタイルプロパティを指定します。

   style={[styles.buttonInnerContainer, focus && styles.focused]}

ViewコンポーネントにbuttonOuterContainerスタイルを追加します。

最終的なButton.tsxコードは次のようになります。

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


export interface IProps {
  pressFunction: Function;
  buttonText: String;
}

const Button = ({pressFunction, buttonText}: IProps) => {
  const [focus, setFocused] = useState(false);

  return (
    <>
      <TouchableOpacity
        style={[styles.buttonContainer, focus && styles.focused]}
        onPress={() => pressFunction()}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}>
        <Text style={styles.buttonText}>{buttonText}</Text>
      </TouchableOpacity>
    </>
  );
};

const styles = StyleSheet.create({
  buttonContainer: {
    backgroundColor: '#FF9900',
    padding: 10,
    width: 150,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  focused: {
    borderWidth: 3,
    borderColor: 'yellow',
    opacity: 0.8,
  },
  buttonText: {
    fontSize: 20,
  },
});

export default Button;

​Buttonコンポーネントの定義

​スタイルの追加

Buttonコンポーネントの定義

スタイルの追加