React Native 焦点在 tvOS 中没有改变

Question

目前，我正在为电视平台开发React Native应用程序，我可以在电视上播放视频。

我在视频播放器组件中添加了反应原生抽屉，能够打开/关闭抽屉，但无法更改抽屉内的焦点。

这是抽屉代码：

render() {
return (
<Container hasTVPreferredFocus={true}>
<Content                    
bounces={false}
style={{ flex: 1, backgroundColor: '#fff', top: -1 }}
>
<View style={styles.container}>
<TouchableHighlight onPress={() => {this.setState({ selected: 'play' });}}>
<View style={{ backgroundColor: this.state.selected === 'play'? '#fbd2c1' : '#FFFFFF' , padding: 10, borderRadius: 5 }}>
<Image style={styles.image} source={require('./images/play.png')} />
</View>
</TouchableHighlight>                        
<TouchableOpacity onPress={() => {this.setState({ selected: 'time' });}}>
<View style={{ backgroundColor: this.state.selected === 'time'? '#fbd2c1' : '#FFFFFF' , padding: 10, borderRadius: 5 }}>
<Image style={styles.image} source={require('./images/clock.png')} />
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.setState({ selected: 'user' });}}>
<View style={{ backgroundColor: this.state.selected === 'user'? '#fbd2c1' : '#FFFFFF' , padding: 10, borderRadius: 5 }}>
<Image style={styles.image} source={require('./images/user.png')} />
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.setState({ selected: 'resolution' });}}>
<View style={{ backgroundColor: this.state.selected === 'resolution' ? '#fbd2c1' : '#FFFFFF' , padding: 10, borderRadius: 5 }}>
<Image style={styles.image} source={require('./images/computer.png')} />
</View>
</TouchableOpacity>
</View>
{ this.renderUI() }
</Content>
</Container>
);
}

谢谢。

Answer 1

为了解决这个问题，我建议你强制聚焦，看看它是否像那样工作。如果它有效，问题出在您如何使用TouchableHighlight. 我会考虑像这样强制改变焦点：

hasTVPreferredFocus={true}
onPress={() => {}}

(您必须将其插入元素标签TouchableHighlight(