В настоящее время я занимаюсь разработкой приложения React Native для телевизионной платформы и могу воспроизводить видео на телевизоре.
Я добавил Reaction-native-Box в Видеоплеер компонент и может открывать / закрывать ящик, но не может изменить фокус внутри ящика.
Вот код ящика:
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>
);
}
Спасибо.