0

我刚刚部署了一个使用 react native 0.57 构建的 Android TV 演示应用程序。但是，我注意到 Focusable 元素无法正常工作。我期待焦点在带有事件 onPressIn / onPressOut 的 TouchableOpacity 和 TouchableHighlight 元素上打开/关闭，但它不起作用。当我使用 D-pad 键（左、右、上、下）浏览此元素时，样式保持不变。另外，我在 Android Emulator 上遇到了同样的问题。

我能够确认 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:\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;
4

2 回答 2

1

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

于 2018-11-08T15:38:30.183 回答
0

正如在此处的文档中所说，您可以在诸如和之类的混入上使用onBlur和。onFocusTouchableTouchableWithoutFeedback

所以你必须将你的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>

于 2021-04-06T15:54:13.017 回答