javascript - 如何在 React Native FlatList 中按下组件时更改其颜色

Question

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

最重要的是仅应选择一项。如何实现这一目标？我通过使用 redux 操作和化简器获取了数据的值(value)。但是，我不知道如何实现这个选择过程。

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

请提供逐步说明，因为我完全是初学者。我不想在 redux 的帮助下做到这一点，所以组件级别的状态会有很大的帮助。

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