React Native中Button组件在TV遥控器聚焦时修改按钮颜色的问题问询

React Native 内置的Button组件封装程度较高，没有暴露TV端聚焦相关的事件回调，无法直接实现需求。官方推荐使用更灵活的Pressable组件替代，该组件原生支持onFocus、onBlur事件，可在遥控器聚焦到组件时立刻触发回调，完全在点击动作之前执行，且支持完全自定义样式，不受默认透明度效果限制。

实现代码示例 #

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

// 组件内部逻辑
const YourComponent = (props) => {
  // 维护按钮聚焦状态
  const [isBtnFocused, setIsBtnFocused] = useState(false);

  return (
    <Pressable
      disabled={props.loading}
      // 遥控器聚焦到按钮时触发
      onFocus={() => setIsBtnFocused(true)}
      // 遥控器离开按钮时触发
      onBlur={() => setIsBtnFocused(false)}
      onPress={() => props.addNumber(1)}
      // 动态绑定不同状态下的样式
      style={({ pressed }) => [
        styles.button,
        isBtnFocused && styles.buttonFocused,
        pressed && styles.buttonPressed,
        props.loading && styles.buttonDisabled
      ]}
    >
      <Text style={isBtnFocused ? styles.buttonTextFocused : styles.buttonText}>
        1
      </Text>
    </Pressable>
  )
}

// 样式定义
const styles = StyleSheet.create({
  button: {
    paddingHorizontal: 20,
    paddingVertical: 10,
    backgroundColor: '#2196F3',
    borderRadius: 4,
    alignItems: 'center',
    justifyContent: 'center'
  },
  buttonFocused: {
    // 自定义聚焦时的背景色，也可加边框、阴影、缩放效果提升辨识度
    backgroundColor: '#1976D2',
    borderColor: '#FFC107',
    borderWidth: 2,
    elevation: 4,
    transform: [{ scale: 1.05 }]
  },
  buttonPressed: {
    backgroundColor: '#0D47A1'
  },
  buttonDisabled: {
    backgroundColor: '#BBDEFB',
    opacity: 0.6
  },
  buttonText: {
    color: '#fff',
    fontSize: 16
  },
  buttonTextFocused: {
    color: '#fff',
    fontWeight: 'bold'
  }
})

注意事项 #

• 如果你使用的是React Native for TV专属分支版本，所有可交互组件默认支持onFocus/onBlur回调，无需额外配置
• 如果自定义组件嵌套层级较深时出现聚焦事件不触发的情况，可手动给组件添加tvSelectable={true}属性开启可聚焦能力
• 如果是低于0.63版本不支持Pressable的RN项目，可以使用TouchableOpacity组件，它同样支持onFocus/onBlur回调，配合状态也可实现相同效果

内容的提问来源于stack exchange，提问作者Cannon Moyer