React native 从平面列表中选择一项

我创建了这个项目列表，我想让用户选择一个项目，然后更改这个项目的样式。 这是我的方法：

class Gift extends React.Component {
  constructor(props){
    super(props)
    this.titleUpValue = new Animated.Value(0);
    this.state = {
      isLoading: false,
      listGifts: [
  {
      "id" : "1",
      "type" : 'gift' ,
      "etat" : 1,
      "titreTransaction": "عدد الوحدات",
      "contenuTrans": "400",
      "dateTrans": "2019-07-31 17:47:31"
  },
  {
      "id" : "2",
      "type" : 'ba' ,
      "etat" : 1,
      "titreTransaction": "عدد الوحدات",
      "contenuTrans": "1000",
      "dateTrans": "2019-07-31 17:42:57"
  },
  {
      "id" : "3",
      "type" : 'ba' ,
      "etat" : 1,
      "titreTransaction": "عدد الوحدات",
      "contenuTrans": "500",
      "dateTrans": "2019-07-31 17:31:35"
  },
  }
],
      itemId: null,
      btnDisabled: true,
      itemindex: null,
    }
  }

  PressedItem = (itemId) => {
      this.setState({ itemId: itemId, btnDisabled: false,})

  }

  renderItem = ({ item }) => {
    return (
          <TouchableOpacity
          onPress={() => { this.setState({ itemindex: item.id, itemId: item.id, btnDisabled: !this.state.btnDisabled, }), console.warn('id > ' +  this.state.btnDisabled) }}
          style= {[
            StylesGift.giftItem,
              this.state.itemindex === item.id ? StylesGift.SelectedlistItem : StylesGift.UnselectedlistItem

          ]}>
            <Image source={Images.gift1}
              style={StylesGift.imageStyle}
              resizeMode={'contain'}
            />
          <View style= {StylesGift.footGift}>
            <View style= {StylesGift.nameGiftContainer}>
              <View style= {StylesGift.valueGiftContainer}>
                <Text style= {StylesGift.valueGiftText}>200</Text>
              </View>
              <Text style= {StylesGift.nameGiftText}>الهدايا</Text>
              <Text style= {StylesGift.nameGiftText}>{item.id}</Text>

            </View>

          </View>
          <View style= {StylesGift.headGift}>
            <View style= {StylesGift.icGiftContainer}>
              <IconFA name="check" size={hp('1.6%')} color= {Colors.white} style={StylesGift.icGift}/>
            </View>
          </View>
        </TouchableOpacity>

    )
}
  render() {

    return (



        <View style={Styles.listContainer}>
          {
            this.state.isLoading ?
            <ActivityIndicator size='large' style={Styles.styleAI} color={Colors.mainYellow}/>
            :
            <FlatList
              style={Styles.flatlist}
              contentContainerStyle={Styles.flatContent}
              data={this.state.listGifts}
              keyExtractor={(item) => item.id.toString()}
              renderItem={this.renderItem}
              numColumns={2}

            />
          }


        </View>
        
            );
          }
        }
        
        export default Gift;

这是三种主要样式：

 giftItem: {
    width: wp('42%'),
    height: hp('30%'),
    alignItems: 'center',
    backgroundColor: Colors.white,
    borderRadius: wp('2%'),
    overflow: 'hidden',
    marginVertical: wp('2%'),
    marginHorizontal: wp('2%'),

    // borderWidth: 1, borderColor: 'blue',
  },

  UnselectedlistItem: {
    elevation: 2,

    borderWidth: 1, borderColor: 'red',
  },
  SelectedlistItem: {
    elevation: 8,

    borderWidth: 1, borderColor: 'blue',
  },

---

我认为我的方法是逻辑的，大多数都有效，但我不知道错在哪里，状态：

itemindex

和

itemId

在

setState

中没有变化，没关系，我只需要在平面列表中添加

extraData={this.state}

作为参数，告诉平面列表重新渲染

  <FlatList
      style={Styles.flatlist}
      contentContainerStyle={Styles.flatContent}
      data={this.state.listGifts}
      keyExtractor={(item) => item.id.toString()}
      renderItem={this.renderItem}
      numColumns={2}
      extraData={this.state}
    />

item.id.toString（）}
renderItem={this.renderItem}
numColumns={2}
extraData={this.state}
/>

没问题，我只需要在平面列表中添加

extraData={this.state}

作为参数，告诉平面列表重新渲染

  <FlatList
      style={Styles.flatlist}
      contentContainerStyle={Styles.flatContent}
      data={this.state.listGifts}
      keyExtractor={(item) => item.id.toString()}
      renderItem={this.renderItem}
      numColumns={2}
      extraData={this.state}
    />

item.id.toString（）}
renderItem={this.renderItem}
numColumns={2}
extraData={this.state}
/>