TouchableOpacity 覆盖其他按钮答案

【问题标题】：TouchableOpacity overwriting other buttonsTouchableOpacity 覆盖其他按钮
【发布时间】：2020-10-06 00:08:12
【问题描述】：

在我的组件中，我为每个项目渲染了一个按钮。它正在工作。但是，当我将所有这些都包裹在一个可触摸的 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>
          );
        },

【问题讨论】：

什么是TouchableOpacity？它是否捕获所有用户输入（如鼠标单击事件）？
是的@user0101。它来自 react-native-gesture-handler
嗯，所以它与按钮重叠，对吧？
是的，如果我点击按钮，我只需点击不透明度@user0101
你是从“react-native-gesture-handler”还是“react-native”导入TouchableOpacity？

标签： javascript reactjs typescript react-native native-base

【解决方案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>

  );
},

【讨论】：

这会隐藏文本。我已经尝试过单独包装缩略图，但它覆盖了不应该发生的缩略图的一部分。
我有更新答案，试试看，加zindex向上移动。
这并不能解决最初的问题。删除按钮仍然不可点击。此外，像这样修改我的代码让我每个节点都应该有一个关键问题，即使我已经有一个密钥