创建可设定焦点按钮 - Amazon Vega Docs

由于我们需要在VideoDetailScreen中添加2个可以聚焦的按钮，因此我们将创建自己的按钮组件。这也确保了我们不会重复代码，并且可以在我们的应用中重复使用该按钮。

定义Button组件

在components文件夹下创建一个名为Button.tsx的新文件。
从’react’中导入React和useState。
从’react-native’导入StyleSheet、Text和TouchableOpacity。
创建一个名为Button的箭头函数，该函数具有2个参数，分别名为pressFunction和buttonText。
解构接口中的每个参数并添加:IProps以在对象中强制指定每个参数的类型。pressFunction将是一个函数，而buttonText将是一个字符串。

在导入语句下方，创建一个声明属性类型的接口。

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>
    </>
  );
};

接下来为了让用户清楚地知道选择了哪个按钮，我们将onFocus()和onBlur()属性添加到TouchableOpacity。

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

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

向TouchableOpacity添加一个onFocus属性，然后将其设置为调用值为true的setFocused()函数。
将onBlur属性添加到TouchableOpacity，然后将其设置为调用值为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样式添加到样式表中：

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将有一个样式属性，该属性取决于聚焦项的值：

为TouchableOpacity赋予buttonInnerContainer的样式属性和聚焦项的条件样式属性。

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

将buttonOuterContainer样式添加到View组件中。

最终的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组件

添加样式