3

您好，我正在使用 React Native 62.2 并设法让 TVEventHandler 正常工作。在同一个组件上，我正在使用一个按钮和一个平面列表。焦点正在使用 D Pad 从按钮移动到平面列表，并且当反复单击时，我能够在使用 D Pad 时触发事件并且能够触发事件焦点，模糊，向上，向下，我认为这是 Flatlist 项目，因为它在一些点击后向下滚动，并且在按下向上按钮时以同样的方式向上滚动。

我的 Flatlist 项目的代码是：

    export default class CountryCodeListItem extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            focused: false
        }
    }

    onFocus() {
        console.log("focussed");
        this.setState({
            focused: true
        })
    }

    onBlur() {
        this.setState({
            focused: true
        })
    }

    render() {
        const { item, index, selectedIndex } = this.props;
        console.log(index, selectedIndex, this.state.focused);
        return (
            <TouchableOpacity
                key={index}
                style={[styles.listitem, this.state.focused ? styles.listitemFocus : {}]}
                //hasTVPreferredFocus={(index === selectedIndex) ? true : false}
                onFocus={() => { this.onFocus }}
                onBlur={() => { this.onBlur }}
                onPress={() => { this.props.selectCountryCode(item, index) }}
            >
                <SvgUri
                    width="25"
                    height="15"
                    uri={item.cn_flag}
                />
                <Text style={styles.countryName}>{item.cn.trim()} ({item.dial_code})</Text>
            </TouchableOpacity>
        )
    }
}

const styles = StyleSheet.create({

    countryName: {
        fontSize: globalstyles.fontMedium.fontSize,
        color: globalstyles.subTitleColor.color,
        marginLeft: 50,
        position: 'absolute'
    },
    listitem: {
        padding: 10,
        height: 40,
        alignItems: 'center',
        flexDirection: 'row'
    },
    listitemFocus: {
        backgroundColor: globalstyles.highlightColor.color
    }
})

您能帮我看看如何为平面列表项目管理焦点，在焦点上，背景颜色会发生变化（这发生在平面列表上方的按钮上），并且在模糊时它应该被取消选择。

4

0 回答 0