React-native：如何在触摸扁平化项目时突出显示它

constructor (props) {
    super(props);
    this.state = {
        ...
        game_names: [
            {game_name:"game_name1", players:4},
            {game_name:"game_name2", players:4},
            {game_name:"game_name3", players:4},
            {game_name:"game_name4", players:4},
            {game_name:"game_name5", players:4},
            {game_name:"game_name6", players:4},
        ],
        game_selected: '',
        ...
    }
}
...
selectPublicGame = (game) => {
    this.setState({game_selected: game});
}

renderItem = ({item}) => {
  const unselected_game =
  <View style={{flexDirection: 'row', flex: .5, justifyContent: 'space-between'}}>
    <Text style={[styles.listText, styles.textPaddingHorizontal]}>
      {item.game_name}
    </Text>
    <Text style={[styles.listText, styles.textPaddingHorizontal]}>
      ({item.players}/6)
    </Text>
  </View>;

  const selected_game =
  <View style={{flexDirection: 'row', flex: .5, justifyContent: 'space-between', backgroundColor: colors.JBTealTrans}}>
      <Text style={[styles.listText, styles.textPaddingHorizontal]}>
        {item.game_name}
      </Text>
      <Text style={[styles.listText, styles.textPaddingHorizontal]}>
      ({item.players}/6)
    </Text>
  </View>;

  let selection;

  if (item.game_name == this.state.game_selected) {
      selection = selected_game
  } else {
      selection = unselected_game
  }

  return (
    <TouchableWithoutFeedback
      onPress={() => this.selectPublicGame(item.game_name)}
    >
      {selection}
    </TouchableWithoutFeedback>
  )
}
...
render() {
  ...
  return(
    ...
    <FlatList
      data={this.state.game_names}
      renderItem={this.renderItem}
      keyExtractor={(item, index) => index.toString()}
    />
    ...
  )
}
...