React Native Android ТВ фокус на элементе Flatlist - PullRequest
Новая
       83

React Native Android ТВ фокус на элементе Flatlist

0 голосов
/ 25 мая 2020

Здравствуйте, я использую React Native 62.2, и мне удалось заставить TVEventHandler работать. В том же компоненте я использую кнопку и Flatlist. Фокус перемещается с помощью D Pad от кнопки к Flatlist, и при многократном нажатии я могу запускать событие, когда я использую D Pad и могу запускать события для focus, blur, up, down, который, как я полагаю, предназначен для элементов 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
    }
})

Можете ли вы мне помочь, как можно управлять фокусом для элемента плоского списка, когда в фокусе изменяется цвет фона (это происходит для кнопки, расположенной над Flatlist), и при размытии ее выбор должен быть отключен.

...