React Native - 在焦点上更改按钮颜色答案

【问题标题】：React Native - Change button color on focusReact Native - 在焦点上更改按钮颜色
【发布时间】：2021-10-17 03:21:25
【问题描述】：

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

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

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

【问题讨论】：

TouchableWithoutFeedback 有一个 onFocus 监听器
@diedu 我真的希望这会起作用，但我什至无法通过电视遥控器选择包裹在TouchableWithoutFeedback 中的元素。在模拟器中，我可以使用鼠标点击按钮。
尝试传递focusable={true}
@diedu 那没用:(
你提到你尝试过TouchableHighlight，但我不太明白你的意思是不透明度变化太小，这是否意味着TouchableHighlight 确实显示了你想要的变化但还不够?因为我看到它有一个 activeopacity 道具，您可以将其设置为 1 并使用 underlaycolor 设置颜色

标签： android react-native

【解决方案1】：

您可以在TouchableOpacity 或TouchableHighlight 中拥有onFocus 属性，但是为了在TV 上使用它，您需要从here 中提到的特定包中导入它。如上所述您需要从react-native 移动到react-native-tvos。所有与电视相关的内容都已移至该包中。它跟踪本机反应，但有额外的电视支持。它不会回到react-native 核心包。

read this

【讨论】：

【解决方案2】：

来自 react-native docs ：

在 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 tv 模式

  <!-- 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

【讨论】：

【解决方案3】：

替换为：

      state = {
        buttonStyle: styles.button,
        [...]
      }
      [...]

      <TouchableWithoutFeedback disabled={props.loading} styles={this.state.buttonStyle} 
      onPress={() => {props.addNumber(1)}} 
      onFocus={() => {this.setState({buttonStyle: styles.focusedButton})}} >
          <Text>1</Text>
      </TouchableWithoutFeedback >

如果您在同一个组件中拥有所有按钮，则需要将状态值用作数组或对象，并定义键或索引以访问特定的。

https://reactnative.dev/docs/touchablewithoutfeedback#onfocus

【讨论】：

TouchableHighlight 没有 onFocus 监听器。我也试过这个。
对不起，我想说 TouchableWithoutFeedback
我确实尝试过，但我无法通过 Fire Stick 遥控器将注意力集中在 TouchableWithoutFeedback 元素上。

【解决方案4】：

您可以使用Pressable 组件，具体方法如下：

<Pressable
  onPress={onPressFunction}
  style={({ focused }) => ({ backgroundColor: focused ? 'red' : 'blue' })}
>
  <Text>I'm pressable!</Text>
</Pressable>

您可以阅读更多关于它的信息in the docs

【讨论】：