React Native 焦点在 tvOS 中没有改变答案

【问题标题】：React Native focus not changed in tvOSReact Native 焦点在 tvOS 中没有改变
【发布时间】：2019-02-05 04:45:51
【问题描述】：

目前，我正在为电视平台开发 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>
    );
}

谢谢。

【问题讨论】：

恕我直言 hasTVPreferredFocus={true} 应该设置为“可聚焦”元素而不是容器。
@xadm 我也尝试过 TouchableHighlight 和 TouchableOpacity。
查看我对类似帖子的回答； stackoverflow.com/a/53211129/1463352

标签： reactjs react-native focus tvos television

【解决方案1】：

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

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

（你必须在元素标签TouchableHighlight中插入这个）

【讨论】：