React Native - 如何使 TouchableOpacity 的一部分不可按下

如何解决React Native - 如何使 TouchableOpacity 的一部分不可按下

我有一个 Card 组件，可以在应用的仪表板页面上显示一个列表。整张卡片都包裹在 TouchableOpacity 中。我希望整个卡片都可以按下，链接到列表页面。

但是，我希望它的右下角不能按下，因为它包含一个 View，上面有 2 个图标（一个喜欢按钮和一个消息按钮）。这些图标中的每一个都有自己的 onPress() 需要发生。

现在，如果您尝试点击右下角的图标，它只会触发整个 TouchableOpacity

这是 return 的 Card 语句：

return (
<Container>
  <Cover style={{ backgroundColor: "red" }}>
    <Image
      source={{
        width: 80,height: 90,url: "https://picsum.photos/200/300",}}
    />
  </Cover>
  <Content>
    <Title>{props.name}</Title>
    <PriceCaption>{"$" + props.price}</PriceCaption>
    <View
      style={{
        position: "absolute",height: 35,width: 100,top: 45,right: 0,flexDirection: "row",alignItems: "Flex-end",}}
    >
      <TouchableOpacity
        style={{
          ...styles.ButtonBackground,backgroundColor: null,left: 70,}}
        onPress={() => {
          launchChat();
        }}
        title={"message"}
      >
        <AntDesign name="mail" size={26} color={colours.purple} />
      </TouchableOpacity>
      <TouchableOpacity
        style={{
          ...styles.ButtonBackground,marginLeft: 0,left: 10,}}
        onPress={() => {
          launchChat();
        }}
        title={"message"}
      >
        <AntDesign name="heart" size={26} color={colours.purple} />
      </TouchableOpacity>
    </View>
  </Content>
</Container>);

是否有属性或方法可以从 View 中排除嵌套的 TouchableOpacity？

注意：如果点击Icons，它们仍然会触发各自的onPress()，但是整个卡片仍然淡出，动画与如果您点击了卡片上的其他地方（因此用户对他们点击的位置的反馈很差）。

解决方法

我对你的问题有一个理解问题，但我相信用 TouchableWithoutFeedback 包装可能是一个解决方案或 pointerEvents={"none"} 属性。如果你对 react-native 的关键字 TouchableWithoutFeedback 组件做一点研究，我想你会得到你想要的结果

我经常在其他 TouchableOpacity 中放置一些 TouchableOpacity。当您按下内部 TO 时，将按下内部而不是父项。所以你不应该考虑让父的某些区域无法按下。

我只是测试我的示例代码以确保。正如我之前所说，它应该有效。我不知道在你的情况下是什么导致了这个问题。