Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/361.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript React Native-如何使部分TouchableOpacity不可按_Javascript_Reactjs_React Native_Touchableopacity - Fatal编程技术网

Javascript React Native-如何使部分TouchableOpacity不可按

Javascript React Native-如何使部分TouchableOpacity不可按,javascript,reactjs,react-native,touchableopacity,Javascript,Reactjs,React Native,Touchableopacity,我有一个卡组件,它在应用程序的仪表板页面上显示一个列表。整个卡被包裹在一个可触摸不透明度中。我希望整张卡都可以按,这样可以链接到列表页面 但是,我希望它的右下角不可按下,因为它包含一个视图,上面有两个图标(一个Like按钮和一个Message按钮)。每个图标都有自己需要的onPress() 现在,如果您尝试单击右下角的图标,它只会触发整个TouchableOpacity 这是卡的返回语句: return ( <Container> <Cover style={{ backg

我有一个
组件,它在应用程序的仪表板页面上显示一个列表。整个卡被包裹在一个
可触摸不透明度
中。我希望整张卡都可以按,这样可以链接到列表页面

但是,我希望它的右下角不可按下,因为它包含一个
视图
,上面有两个图标(一个Like按钮和一个Message按钮)。每个图标都有自己需要的
onPress()

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

这是
卡的
返回
语句:

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>);
返回(
{props.name}
{“$”+道具价格}
{
launchChat();
}}
标题={“消息”}
>
{
launchChat();
}}
标题={“消息”}
>
);
是否有一个属性或方法可以将嵌套的
视图
可触摸不透明度
中排除


注意:如果你点击
图标,它们仍然会触发各自的
onPress()
,但是,整个卡仍然会淡出,动画效果与你点击卡上其他位置时相同(因此用户对点击位置的反馈很差)。

我理解你的问题,但我相信用TouchableWithoutFeedback包装可能是一个解决方案或pointerEvents={“none”}属性。如果您对react native中的关键字TouchableWithoutFeedback组件进行一些研究,我想您会得到想要的结果

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

我经常在其他TouchableOpacity中放置一些TouchableOpacity。当您按“内部到”时,将按“内部”而不是“父级”。所以你不应该考虑让父母的某些方面变得不必要


我只是测试我的示例代码来确定。正如我早些时候所说,它应该会起作用。我不知道是什么原因导致您的问题。

我经常在其他触摸不透明度中放置一些触摸不透明度。当您按“内部到”时,将按“内部”而不是“父级”。所以你不应该考虑让父母的某些方面变得不必要


我只是测试我的示例代码来确定。正如我早些时候所说,它应该会起作用。我不知道是什么原因导致了您的问题。

您可以绝对定位该视图而不是嵌套它您可以绝对定位该视图而不是嵌套它现在,我就是这样设置的,嵌套的TouchableOpacity。但是,当在内部区域单击时,它仍然会激活外部(外部也会淡出),这就是我设置它的方式,嵌套TouchableOpacity。但是,当在内部区域单击时,仍会激活外部(外部也会淡出)