更改 FlatList 的唯一 onPressed 项的样式

Posted 2023-04-15

【中文标题】更改 FlatList 的唯一 onPressed 项的样式

【英文标题】：Change the style of only onPressed item of FlatList

【发布时间】：2019-05-06 02:29:21

【问题描述】：

我一直在尝试更改 Flatlist 的 selected(onPress) 项目的颜色，但它正在更改整个列表的颜色。我添加了以下代码：

class SelectionForm extends Component 
    constructor(props) 
        super(props);
        this.state = 
            textColor: '#333'
        ;
    

    typeSelected(value) 
        Alert.alert(value);
        this.setState(
            textColor: 'green'
        );
    

    render() 
        return (
            <View>
                <FlatList
                    data=[
                         utId: '1', utName: 'Guest' ,
                         utId: '2', utName: 'Faculty' ,
                         utId: '3', utName: 'Student' 
                    ]
                    renderItem=
                        ( item ) => 
                        <Text 
                            style=[
                                styles.userListText, 
                                 
                                    backgroundColor: this.state.bgColor, 
                                    color: this.state.textColor 
                            ] 
                            onPress=() => this.typeSelected(item.utId)
                        >
                            item.utName
                        </Text>
                    
                    keyExtractor=(item, index) => index.toString()
                />
            </View>
        );
    


const styles = StyleSheet.create(      
    userListText: 
        fontSize: 14,
        color: '#333',
        paddingTop: 10,
        paddingBottom: 10,
        borderBottomWidth: 1,
        borderColor: '#eee'

    
);

export default SelectionForm;

我正在使用 Text 来显示列表。 onPress 列表中的文本，我正在获取单击项的值，但所有列表项的样式都在变化。

【参考方案1】：

您应该使您的代码依赖于您要更改颜色的项目的id。

你的状态应该有一个标识符来跟踪当前按下的项目，比如itemPressed，它应该用一个任意值初始化，比如-1，这样它就不会表示列表中的任何项目。

所以你的typeSelected 应该是这样的：

typeSelected(value) 
   Alert.alert(value);
   this.setState(
       itemPressed: value
   );

您的 Text 组件应该如下所示：

<Text 
   style=[
      styles.userListText, 
       
          backgroundColor: this.state.bgColor, 
          color: this.state.itemPressed  === item.utId ? 'green' : 'black'
      ] 
      onPress=() => this.typeSelected(item.utId)
>