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

Question

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

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

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

这是Card的return声明：

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,
          backgroundColor: null,
          marginLeft: 0,
          left: 10,
        }}
        onPress={() => {
          launchChat();
        }}
        title={"message"}
      >
        <AntDesign name="heart" size={26} color={colours.purple} />
      </TouchableOpacity>
    </View>
  </Content>
</Container>);

是否有属性，或者我可以从TouchableOpacity中排除嵌套View的方式？

注意：如果您单击Icons ，它们仍然会触发各自的onPress() ，但是，整个卡片仍然会淡出，并且 animation 与您单击卡片上的其他位置相同（因此用户在他们的位置上得到的反馈很差点击）。

Answer 1

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

Answer 2

我经常在其他 TouchableOpacities 中放置一些 TouchableOpacity。 当您按下内部 TO 时，将按下内部而不是父级。 所以你不应该考虑让父母的某些领域变得不可压制。

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