Question

我刚刚部署了一个使用react native 0.57构建的Android TV演示应用程序。但是，我注意到Focusable元素无法正常工作。我原本希望焦点放在具有事件onPressIn / onPressOut事件的TouchableOpacity和TouchableHighlight元素上，但是它不起作用。当我使用D-pad键（左，右，上，下）在此元素中导航时，样式保持不变。另外，我在Android模拟器上遇到了同样的问题。

我能够确认onPress事件是否正常工作，因为当我按下D-pad的“选择”键时，该事件附带的任务就发生了。

我没有看到任何错误。我将分享下面的代码和我的环境设置，以期寻求帮助或任何方向。

反应本机环境信息：

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:\Users\Justimiano.Alves\AppData\Roaming\npm\yarn.CMD
  npm: 4.6.1 - C:\Program Files\nodejs\npm.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

正如文档 here 中所说，您可以在 onBlur 混入（例如 onFocus 等）上使用 Touchable 和 TouchableWithoutFeedback。

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

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

Android TV的React Native-焦点移入/移出事件问题

2 个答案: