嵌套的 TouchableOpacity Parent onPress 不起作用答案

【问题标题】：Nested TouchableOpacity Parent onPress not working嵌套的 TouchableOpacity Parent onPress 不起作用
【发布时间】：2020-04-13 12:57:09
【问题描述】：

我遇到了这个问题，我试图确保父母的 onPress 被触发，但它不会

我正在尝试创建一个可重用的自定义 touchableOpacity 组件，该组件包装其他组件，以便它可以决定是否可以显示子组件，并决定/更改按下子组件时发生的情况。

const CustomTouchable = (children, onPress) => {
   function handleOnPress = () => {
      if(validation){
         onPress();
      }
   }

   return <TouchableOpacity onPress={handleOnPress}>{children}</TouchableOpacity>
}


const MainComponent = () => {
   function onPress = () => {console.log('test')}

    <CustomTouchable onPress={onPress}>
       <TouchableOpacity style={styles.button}>
          <Text>Press Here</Text>
       </TouchableOpacity>
    </CustomTouchable>
}

但是父级onPress没有触发，怎么触发呢？

【问题讨论】：

标签： javascript react-native touchableopacity

【解决方案1】：

这是因为触摸事件是由孩子而不是父母接收的。将以下道具分配给您的子组件

pointerEvents={"none"}

【讨论】：

谢谢！这是我正在寻找的那个，但很遗憾，我最近才加入这个网站，所以我不能支持你的答案。
没关系。很高兴为您提供帮助，您可以通过单击对勾图标来接受此正确答案。
太棒了！它拯救了我的一天！

【解决方案2】：

像这样禁用第二个 TouchableOpacity

<TouchableOpacity onPress={onPress}>
  <TouchableOpacity
    disabled
    style={styles.button}
  >
    <Text>Press Here</Text>
  </TouchableOpacity>
  </TouchableOpacity>

【讨论】：

嘿，谢谢你的回答，但在我的情况下，有时孩子只是一个普通的组件，没有禁用的道具
好的，如果孩子不是一个“按钮”，例如一个视图，那么它会在不做任何事情的情况下工作
哦，真的吗？好的很酷，但是我还有一个问题可以说我将外部 touchableOpacity 作为自定义组件，如何将禁用的道具传递给它的孩子？
你能用例子发布另一个问题吗？然后我可以用代码示例来回答。我不确定你想做什么。
好的，但由于 stackoverflow 每 90 分钟只允许 1 个问题，所以我只更新问题。谢谢