Как изменить цвет компонента при его нажатии в React Native FlatList

Question

Я пытался создать список, в котором есть карточки и элемент списка из источника данных. Я успешно поднял список, но чего я хочу добиться, так это того, чтобы, когда пользователь касается элемента в списке, цвет элемента должен меняться.

Самое главное должен быть выбран только один элемент . Как этого добиться? Я получил ценность данных с помощью редукционных действий и редукторов. Но я не имею ни малейшего представления, как добиться этого процесса отбора.

Мой код flatList:

 <FlatList
    horizontal={true}
    data={this.qtyList}
    keyExtractor={item => item.id.toString()}
    showsHorizontalScrollIndicator={false}
    renderItem={({ item }) => (
            <TouchableHighlight 
            onPress={() => {

            }}
            >
            <Card
            containerStyle={{  borderRadius: 5 }}
            >
            <Text>
            {item.qty}
            </Text>
            </Card>
        </TouchableHighlight>
    )}
/>

Пожалуйста, предоставьте пошаговые инструкции, так как я новичок. я не хочу делать это с помощью приставки, поэтому состояние уровня компонента будет очень полезно.

Answer 1

Вам нужна функция, которая устанавливает состояние, когда пользователь щелкает элемент FlatList. При изменении состояния стиль компонента изменится для отображения выбранного элемента. И вы должны установить extraData в FlatList для рендеринга при изменении состояния.

class Second extends React.Component {    
    constructor(props) {
        super(props);
        this.state = {
            selectedItem: null
        };
    }

    onPressHandler(id) {
        this.setState({selectedItem: id});
    }

    render() {
        return (
            <View>
                <FlatList
                    extraData={this.state.selectedItem} //Must implemented
                    horizontal={true}
                    data={qtyList}
                    keyExtractor={item => item.id.toString()}
                    showsHorizontalScrollIndicator={false}
                    renderItem={({item}) => (
                        <TouchableOpacity
                            onPress={() => this.onPressHandler(item.id)}>
                            <Card
                                containerStyle={this.state.selectedItem === item.id ? {
                                    borderRadius: 5,
                                    backgroundColor: "#000000"
                                } : {borderRadius: 5, backgroundColor: "#a1a1a1"}}>
                                <Text>{item.qty}</Text>
                            </Card>
                        </TouchableOpacity>
                    )}
                />
            </View>
        );
    }
}

Answer 2

Вы должны хранить идентификатор выбранного элемента в состоянии:

<TouchableHighlight 
  onPress={() => {
    this.setState({ itemSelected: item.id }) <== your item must have a unique id
  }}
>

Тогда, например, в компоненте вашей карты вы можете сделать:

<Card
  containerStyle={{
    borderRadius: 5,
    backgroungColor: this.state.itemSelected === item.id ? 'red', 'white',
  }}
>

Кроме того, вы должны добавить extraData={this.state} в свой плоский список. Вот ссылка на документ