admin 管理员组

文章数量: 1087134

i had this issue where i'm trying to make sure the parent's onPress is triggered, but it wont

im trying to create a custom touchableOpacity ponent that able can be reusable, that wrap other Component so it can decide if the children can be shown or not and decide/alter what happen when the children ponent is pressed.

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

but the parent onPress is not triggered, how can i trigger it?

i had this issue where i'm trying to make sure the parent's onPress is triggered, but it wont

im trying to create a custom touchableOpacity ponent that able can be reusable, that wrap other Component so it can decide if the children can be shown or not and decide/alter what happen when the children ponent is pressed.

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

but the parent onPress is not triggered, how can i trigger it?

  • javascript
  • react-native
  • touchableopacity
Share Improve this question edited Apr 13, 2020 at 13:51 Nathan Priyasadie asked Apr 13, 2020 at 12:57 Nathan PriyasadieNathan Priyasadie 1332 silver badges8 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 9

This is because the touch event is received by the children and not the parent. Assign following prop to your Child Component 

pointerEvents={"none"}

Make the second TouchableOpacity disabled like this

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

本文标签： javascriptNested TouchableOpacity Parent onPress not workingStack Overflow

版权声明：本文标题：javascript - Nested TouchableOpacity Parent onPress not working - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744037195a2522587.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。