React Native for Android TV - Focus In/Out event Issue

Question

我刚刚部署了一个使用 react native 0.57 构建的 Android TV 演示应用程序。但是，我注意到可聚焦元素无法正常工作。我期待焦点在事件 onPressIn/onPressOut 的 TouchableOpacity 和 TouchableHighlight 元素上打开/关闭，但它不起作用。当我使用方向键(左、右、上、下(浏览此元素时，样式仍然不可更改。另外，我在安卓模拟器上遇到了同样的问题。

我能够确认 onPress 事件它正在工作，因为当我点击方向键"选择"键时，附加到事件的任务发生了。

我没有看到任何错误。我将分享下面的代码和我的环境设置，希望得到一些帮助或任何方向。

反应原生环境信息：

System:
OS: Windows 10
CPU: x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
Memory: 4.01 GB / 15.82 GB
Binaries:
Yarn: 1.7.0 - C:UsersJustimiano.AlvesAppDataRoamingnpmyarn.CMD
npm: 4.6.1 - C:Program Filesnodejsnpm.CMD
IDEs:
Android Studio: Version  3.1.0.0 AI-173.4907809

import React, { Component } from 'react';
import { Text, TouchableOpacity } from 'react-native';
import styles from './Button.component.styles';
import { colors } from '../../config/styles.config';
// create a component
class CtaSecundaryButton extends Component {
constructor(props){
super(props);  
this.state = {
backgroundColor: colors.backgroundRedSecondary
}      
this._onPressIn = this._onPressIn.bind(this);
this._onPressOut = this._onPressOut.bind(this);
}
_onPressIn (){
this.setState({backgroundColor: colors.backgroundBlack});
}
_onPressOut ()
{
this.setState({backgroundColor: colors.backgroundRed})
}
render() {
return (            
<TouchableOpacity onPressIn={this._onPressIn} onPressOut ={this._onPressOut} onPress={this.props.onPress} style={{ marginTop: 10, width:'50%', backgroundColor: colors.backgroundRedSecondary, alignItems: 'center',height:40, padding: 5, color:colors.inputColor}} activeOpacity={0.5}>
<Text style={styles.textScundary}>{this.props.children}</Text>
</TouchableOpacity>
);
}
}
export default CtaSecundaryButton;

Answer 1

您是否尝试过onFocus&onBlur属性(而不是onPressIn&onPressOut？

Answer 2

正如此处文档中所说，您可以在Touchable混音(如TouchableWithoutFeedback等(上使用onBlur和onFocus。

因此，您必须将render()中的TouchableOpacity元素更改为：

<TouchableOpacity onFocus={this._onPressIn} onBlur ={this._onPressOut} onPress={this.props.onPress} style={{ marginTop: 10, width:'50%', backgroundColor: colors.backgroundRedSecondary, alignItems: 'center',height:40, padding: 5, color:colors.inputColor}} activeOpacity={0.5}>
<Text style={styles.textScundary}>{this.props.children}</Text>
</TouchableOpacity>