TouchableOpacity 覆盖其他按钮

Posted 2023-03-13

【中文标题】TouchableOpacity 覆盖其他按钮

【英文标题】：TouchableOpacity overwriting other buttons

【发布时间】：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？

【参考方案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向上移动。

这并不能解决最初的问题。删除按钮仍然不可点击。此外，像这样修改我的代码让我每个节点都应该有一个关键问题，即使我已经有一个密钥