如何在 ImageBackground 中使用图标作为按钮？答案

【问题标题】：How to use a Icon as a Button in a ImageBackground?如何在 ImageBackground 中使用图标作为按钮？
【发布时间】：2020-06-23 14:07:39
【问题描述】：

我正在制作带有图像背景和图标的卡片。但我需要弄清楚如何在图像背景中使用按钮。每次我保护应用程序时都会导致函数加载。如果我按下删除图标，我只需要它来删除这些卡片。

export default class FavoriteScreen extends React.Component {

  deleteIcon = id => {
    const filteredData = favorites.filter(item => item.id !== id);
    console.log(filteredData)
    alert('deleted')
  }

  renderFavorite = favorite => {
    return (
      <View style={{}}>
        <ImageBackground source={require('../assets/pizza.png')} style={styles.background}
          imageStyle={{
            width: '100%',
            height: '100%',
            borderRadius: 20,
            opacity: 0.4,
            flexDirection: 'row'
          }}>
          <Text style={styles.recipeTitle}>{favorite.name}</Text>
          <MaterialCommunityIcons name='clock-outline' size={30} color='#277093' style={styles.clockIcon}></MaterialCommunityIcons>
          <Text style={styles.cookTime}>~ {favorite.cookTime}</Text>
          <TouchableOpacity style={styles.deleteButton} onPress={this.deleteIcon(favorite.id)}>
            <MaterialIcons style={styles.delete} name='delete' size={28} color='#277093'></MaterialIcons>
          </TouchableOpacity>
        </ImageBackground>
      </View >
    )
  }
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.headerTitle}> Favorites</Text>
        </View>
        <FlatList
          style={styles.favorite}
          data={favorites}
          renderItem={({ item }) => this.renderFavorite(item)}
          keyExtractor={item => item.id}
          showsVerticalScrollIndicator={false}
        />
      </View>
    )
  }
}

【问题讨论】：

标签： javascript react-native

【解决方案1】：

我有点固定，只是删除了 touchableOpacity，但我想要它在里面

【讨论】：