TouchableOpacity覆盖其他按钮

问题描述 投票:0回答:1

在我的组件中,我为每个项目渲染一个按钮。它正在工作。但是,当我将所有包装都放在可触摸的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>
          );
        },
javascript reactjs typescript react-native native-base
1个回答
0
投票

像这样改变吗? (除按钮外还包装标签吗?)

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>

  );
},
© www.soinside.com 2019 - 2024. All rights reserved.