Question

我一直在尝试更改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;

我正在使用文本显示列表。从列表中的onPress Text中，我得到了单击项的值，但是所有列表项的样式都在变化。

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

希望这会有所帮助。快乐编码:)

更改FlatList的仅onPressed项的样式

1 个答案: