React native 更改FlatList的onPressed项的样式

我一直在尝试更改平面列表中selectedonPress项的颜色，但它正在更改整个列表的颜色。我添加了以下代码：

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;

---

我正在使用文本显示列表。按下列表中的文本时，我将获得单击项的值，但所有列表项的样式都在更改

您应该使代码取决于要更改颜色的项目的id

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

因此，您选择的类型应如下所示：

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

您的文本组件应该如下所示：

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

---

希望这有帮助。快乐编码：

您应该使代码取决于要更改颜色的项目的id

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

因此，您选择的类型应如下所示：

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

您的文本组件应该如下所示：

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

希望这有帮助。快乐编码：