在tvOS中没有改变React Native焦点

Question

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

我在Video Player组件中添加了react-native-drawer,能够打开/关闭抽屉,但无法在抽屉内更改焦点.

这是抽屉代码:

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）