React Native - 更改焦点上的按钮颜色

Question

我正在使用ButtonReact Native 的组件，当按钮通过电视遥控器（Amazon Fire Stick）聚焦时，我需要更改按钮的颜色。我没有看到任何可用于该按钮的焦点侦听器。有没有办法实现这个功能？这是我的代码：

<Button disabled={props.loading} styles={styles.button} title="1" onPress={() => {props.addNumber(1)}}/>

我查看了该TouchableHighlight组件，但它不起作用，因为当用户在单击按钮之前将注意力集中在按钮上时，我需要更改颜色。默认情况下，不透明度变化非常小，以至于很难判断按钮当前是否处于焦点状态。

Answer 1

来自反应本机文档：

在 Android TV 上运行时，Android 框架将根据视图中可聚焦元素的相对位置自动应用定向导航方案。Touchable mixin 添加了代码来检测焦点变化，并使用现有方法正确设置组件样式，并在使用电视遥控器选择视图时启动正确的操作，因此 TouchableWithoutFeedback、TouchableHighlight、TouchableOpacity 和 TouchableNativeFeedback 将按预期工作。尤其：

onFocus will be executed when the touchable view goes into focus
onBlur will be executed when the touchable view goes out of focus
onPress will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote.

所以在 TouchableOpacity 上添加 onfocus 应该对你有用，因为你不需要在 AndroidManifest.xml 中进行一些更改来激活 android 电视模式

  <!-- Add custom banner image to display as Android TV launcher icon -->
 <application
  ...
  android:banner="@drawable/tv_banner"
  >
    ...
    <intent-filter>
      ...
      <!-- Needed to properly create a launch intent when running on Android TV -->
      <category android:name="android.intent.category.LEANBACK_LAUNCHER"/>
    </intent-filter>
    ...
  </application>

另外，您可以使用 tvParallaxProperties 和 hasTVPreferredFocus 来显示初始焦点，但效果有限

    <TouchableHighlight
      hasTVPreferredFocus
      tvParallaxProperties={{ magnification: 1.2 }}
    >
      <Text>Button</Text>
    </TouchableHighlight>

https://reactnative.dev/docs/touchableopacity#tvparallaxproperties-android