React Native:更改并保留 Flatlist 中仅按下项目的背景颜色

Question

我已经设法通过将 item.id 分配给状态来更改平面列表中 onPressed 按钮的背景颜色。我的问题是，当我按下另一个按钮时，先前按下的按钮会变回初始背景颜色。即使我按下另一个按钮，如何保持新的背景颜色？

 onPressButtonarrived(item.id) {
    this.setState({ disablearrived: item.id })
    this.setState({ colorarrived: item.id })
  }

<View style={{backgroundColor: item.id === this.state.colorarrived ? '#D6D6D6' : '#E5C454'}}>
    <TouchableOpacity
    onPress={() => {this.onPressButtonarrived(item.id)}} disabled={item.id === this.state.disablearrived ? true : false}>
    <Text>Arrival</Text>
</TouchableOpacity>

Answer 1

您需要为每个项目在状态上设置一些值：

 onPressButtonarrived(item.id) {
        this.setState({ [item.id +'-disablearrived']: !this.state[item.id] });
        this.setState({ [item.id +'-colorarrived']: !this.state[item.id] });
        // that should toggle some true false vars for each item.id 
      }

    <View style={{backgroundColor: this.state[item.id +'-colorarrived'] ? '#D6D6D6' : '#E5C454'}}>
        <TouchableOpacity
        onPress={() => {this.onPressButtonarrived(item.id)}} disabled={!!this.state[item.id +'-disablearrived']}>
        <Text>Arrival</Text>
    </TouchableOpacity>