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

Question

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

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

我的 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

你应该把选中项的id存储在状态中：

<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} 添加到您的平面列表中。 Here's the link to the doc

Answer 2

您需要一个在用户单击 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>
        );
    }
}