React Native для Android TV - выпуск событий Focus In/Out

Я только что развернул демо-приложение для Android TV, созданное с использованием активного нативного 0.57. Однако я заметил, что фокусируемые элементы не работают должным образом. Я ожидал, что фокус будет включен или выключен для элементов TouchableOpacity и TouchableHighlight с событием onPressIn / onPressOut, но это не работает. Стиль остается неизменным, когда я использую клавишу D-pad (влево, вправо, вверх, вниз), чтобы перемещаться по этому элементу. Кроме того, у меня та же проблема с эмулятором Android.

Я смог подтвердить, что событие onPress работает, потому что, когда я нажимаю кнопку "select" на D-панели, и возникает задача, связанная с событием.

Я не видел никакой ошибки. Я собираюсь поделиться приведенным ниже кодом и настройками своей среды в надежде получить помощь или направление.

Реагировать на информацию о родной среде:

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;

2 ответа

Вы пробовали onFocus & onBlur attributes (instead of onPressIn & onPressOut?

Как говорится в документации здесь вы можете использовать onBlur а также onFocus на Touchable миксины, такие как TouchableWithoutFeedback и так далее. .

так что вы должны изменить свой TouchableOpacity элемент в render() к :

Другие вопросы по тегам