Реагировать Родной фокус не изменился в 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)