问题
I just deployed an Android TV demo app built using react native 0.57. However, I noticed that Focusable elements are not working properly. I was expecting the focus going on/off on either TouchableOpacity and TouchableHighlight elements with event onPressIn / onPressOut, but it's not working. The style remains unchangeable when I using D-pad key (left, right, up, down) to navigate through this element. Also, I am having the same issue on Android Emulator.
I was able to confirm that onPress event it's working because when I hit the D-pad "select" key, and the task attached to the event happens.
I haven't seen any error. I am going to share the code below and my environment settings in hope to get some help or any direction.
React Native Environment Info:
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;
回答1:
Did you try the onFocus
& onBlur
attributes (instead of onPressIn
& onPressOut
?
来源:https://stackoverflow.com/questions/52562930/react-native-for-android-tv-focus-in-out-event-issue