嵌套的 TouchableOpacity Parent onPress 不起作用

Question

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

我正在尝试创建一个可重复使用的自定义 touchableOpacity 组件，它包装其他组件，以便它可以决定是否可以显示 children 以及 decide/alter 当 children 组件被按下。

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>
}

但是 parent onPress 没有被触发，我该如何触发它？

Answer 1

像这样禁用第二个 TouchableOpacity

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

Answer 2

这是因为触摸事件是由 children 而不是 parent 接收的。将以下道具分配给您的 Child 组件

pointerEvents={"none"}

嵌套的 TouchableOpacity Parent onPress 不起作用

Nested TouchableOpacity Parent onPress not working

javascript

react-native

touchableopacity