Вложенный TouchableOpacity Parent onPress не работает

Question

У меня была эта проблема, когда я пытаюсь убедиться, что родительский элемент 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 не запускается, как я могу его запустить?

Answer 1

Это потому, что событие касания получают дети, а не родитель. Назначьте следующую опору вашему дочернему компоненту

pointerEvents={"none"}

Answer 2

Отключите вторую функцию TouchableOpacity следующим образом

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

Answer 3

почему у вас есть TouchableOpacity внутри TouchableOpacity?