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()
к :