在“平面清单”中选择“项目”时添加borderColor和borderWidth

Question

我想在Flatlist中选择Card或Item时添加borderColor和borderWidth来了解用户所选择的内容。例如，我们有5张卡片，如果我点击或按下第二张卡片，它将添加borderColor和borderWidth，然后如果我顶另一张卡片，比如说第四张卡片，borderColor和borderWidth将消失或将切换为第四张卡。

这是图片：

这是我的代码：

<Flatlist
   data={this.props.eventsState}
   keyExtractor={item => item.id}
   renderItem={(itemData) => (
      <View style={styles.event}>
          <View style={styles.touchable}>
              <TouchableCmp 
                 onPress={() => {
                 this.map.animateToRegion({
                   latitude: itemData.item.latitude,
                   longitude: itemData.item.longitude,
                   latitudeDelta: this.state.focusedLocation.latitudeDelta,
                   longitudeDelta: this.state.focusedLocation.longitudeDelta
                 }, 350)
                 }}
                 useForeground
              >
                 <View>
                   <ImageBackground source={{uri: itemData.item.imageUrl}} style={styles.image}>
                       <View style={styles.textContainer}>
                          <Text numberOfLines={1} style={styles.title}>{itemData.item.title}</Text>
                          <Text numberOfLines={2} style={styles.description}>{itemData.item.description}</Text>
                       </View>
                    </ImageBackground>
                  </View>
               </TouchableCmp>
             </View>
           </View>
      )
 />

const styles = StyleSheet.create({
map: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
},
iconLocationContainer: {
    position: 'absolute',
    top: 40,
    right: 15,
    // zIndex: 1,

},
iconCreateContainer: {
    position: 'absolute',
    bottom: 260,
    right: 15,
    // zIndex: 1,
},
//--- Style for Marker and Card ---//
scrollView: {
    position: "absolute",
    bottom: 50,
    left: 0,
    right: 0,
  },
  endPadding: {
    //Limit the scrolling after u already know how to
    //use animateToRegion in onPress
    //by using marginRight, otherwise paddingRight
    marginRight: width - CARD_WIDTH,
  },
  event: {
    marginHorizontal: 10,
    marginBottom: 10,
    marginTop: 10,
    shadowColor: 'black',
    shadowOpacity: 8,
    shadowOffset: {width: 0, height: 8},
    shadowRadius: 2,
    elevation: 16,
    borderRadius: 6,
    backgroundColor: 'white',
    height: CARD_HEIGHT,
    width: CARD_WIDTH,
    overflow: 'hidden'
},
eventBorder: {
    borderColor: 'black',
    borderWidth: 3,
    marginHorizontal: 10,
    marginBottom: 10,
    marginTop: 10,
    shadowColor: 'black',
    shadowOpacity: 8,
    shadowOffset: {width: 0, height: 8},
    shadowRadius: 2,
    elevation: 16,
    borderRadius: 6,
    backgroundColor: '#424242',
    height: CARD_HEIGHT,
    width: CARD_WIDTH,
    overflow: 'hidden'
},
touchable: {
    borderRadius: 6,
    overflow: 'hidden'
},
imageContainer: {
    // flex: 2,
    // width: "100%",
    // height: "100%",
    // alignSelf: "center",
    width: '100%',
    height: '70%',
    borderTopLeftRadius: 6,
    borderTopRightRadius: 6,
    overflow: 'hidden'
},
image: {
    width: '100%',
    height: '100%'
},
textContainer: {
    justifyContent: 'flex-end',
    alignContent: 'flex-end',
    height: '100%',
    paddingLeft: 10,
    paddingBottom: 10
},
title: {
    // fontSize: 12,
    // marginTop: 5,
    // fontWeight: "bold"
    fontSize: 12,
    // marginVertical: 4,
    fontWeight: 'bold',
    textAlign: 'auto',
    color: "white"
},
description: {
    // fontSize: 12,
    color: "#eee",
    fontSize: 12,
    color: '#888',
    textAlign: 'auto'
},