Javascript 在React Native FlatList中按下元件时如何更改其颜色

我一直试图开发一个列表，其中包含来自数据源的卡片和列表项。我已经成功地提出了列表，但我想实现的是，当任何用户触摸列表中的项目时，该项目的颜色应该会改变

最重要的是，只应选择一项。如何做到这一点？我通过使用redux操作和reducer获取了数据的价值。但是，我不知道如何实现这个选择过程

我的单位代码：

 <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>
    )}
/>

item.id.toString（）}
showshorizontalscrolindicator={false}
renderItem={（{item}）=>(
{
}}
>
{项目数量}
)}
/>

---

请提供一步一步的指导，因为我完全是一个初学者。我不想在redux的帮助下执行此操作，因此组件级状态将非常有帮助。

您应该将所选项目的id存储在状态中：

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

{
this.setState（{itemSelected:item.id}）

然后，例如，在卡组件中，您可以执行以下操作：

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

---

此外，您必须将

extraData={this.state}

添加到平面列表中。

您需要一个函数，当用户单击平面列表中的某个项目时，该函数可以设置该项目的状态。当状态更改时，显示所选项目的组件样式将更改。当状态更改时，您应该将extraData设置为平面列表以进行渲染

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>
        );
    }
}

第二类扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
selectedItem:null
};
}
onPressHandler（id）{
this.setState（{selectedItem:id}）；
}
render（）{
返回(
item.id.toString（）}
showshorizontalscrolindicator={false}
renderItem={（{item}）=>(
this.onPressHandler（item.id）}>
{项目数量}
)}
/>
);
}
}

现在所有元素都变为蓝色，它不会像预期的那样改变编辑后的答案，它应该与extraData道具一起工作。哇，工作得太棒了！这是一个救命恩人！我非常非常高兴，谢谢一顿兄弟！这两种解决方案实际上都解决了我的问题，谢谢你花时间澄清这些疑问！它是否适用于单选？？若用户选择另一张卡怎么办？之前选择的卡片颜色会变为默认颜色吗？这两种解决方案都解决了我的问题，感谢您抽出时间澄清疑问！