TouchableOpacity覆盖其他按钮

Question

在我的组件中，我为每个项目呈现了一个按钮。它起作用了。但是，当我将所有这些都包装在一个可触摸的TouchableOpacity中时，按钮就不再起作用了。现在一切都是可触摸的不透明。我怎么还能用这个按钮呢？

          return (
            <TouchableOpacity onPress= {()=> console.log('Hello')}>
            <View style={styles.item} key={item.id}>
              <Thumbnail
                style={styles.thumbnail}
                source={{
                  uri:
                    'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
                }}></Thumbnail>
                <View style={styles.nameNumber}>
              <Text style={styles.userName}>{userName}</Text>
              </View>
              <View style={styles.deleteButtonContainer}>
                <Button
                  rounded
                  style={styles.deleteButton}
                  onPress={() => onDeleteContact(item.id)}
                  >
                  <Icon name="trash-o" size={moderateScale(20)} color="black" />
                </Button>
              </View>
            </View>
            </TouchableOpacity>
          );
        },

Answer 1

像这样改变吗？(除了按钮之外，是否要将标签换行？)

return (

    <View style={styles.item} key={item.id}>
      <TouchableOpacity onPress= {()=> console.log('Hello')}>
          <Thumbnail
            style={styles.thumbnail}
            source={{
              uri:
                'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
            }}></Thumbnail>
            <View style={styles.nameNumber}>
                <Text style={styles.userName}>{userName}</Text>
            </View>
      </TouchableOpacity>
      <View style={styles.deleteButtonContainer}>
        <Button
          rounded
          style={styles.deleteButton}
          onPress={() => onDeleteContact(item.id)}
          >
          <Icon name="trash-o" size={moderateScale(20)} color="black" />
        </Button>
      </View>
    </View>

  );
},