Вложенный родитель TouchableOpacity onPress не работает

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


react-native javascript touchableopacity
person Nathan Priyasadie    schedule 13.04.2020    source источник

Ответы (2)


arrow_upward
7
arrow_downward

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

pointerEvents={"none"}
person Arpan Sharma    schedule 13.04.2020
comment
спасибо! это тот, который я ищу, но, к сожалению, я не могу проголосовать за ваш ответ, так как я только недавно присоединился к этому сайту. - person Nathan Priyasadie; 13.04.2020
comment
Все в порядке. рад помочь, вы можете принять это как правильный ответ, нажав на значок галочки. - person Arpan Sharma; 13.04.2020
comment
Это потрясающе! Это просто спасло мой день! - person Monique Altero; 13.01.2021
comment
@MoniqueAltero ура - person Arpan Sharma; 14.01.2021

arrow_upward
-1
arrow_downward

Сделайте второй TouchableOpacity отключенным, как это

<TouchableOpacity onPress={onPress}>
  <TouchableOpacity
    disabled
    style={styles.button}
  >
    <Text>Press Here</Text>
  </TouchableOpacity>
  </TouchableOpacity>
person CR7    schedule 13.04.2020
comment
эй, спасибо за ответ, но в моем случае иногда дети - это просто обычный компонент, у которого нет отключенных реквизитов - person Nathan Priyasadie; 13.04.2020
comment
Хорошо, тогда, если дети не являются кнопкой, например, представлением, тогда оно будет работать, ничего не делая. - person CR7; 13.04.2020
comment
да неужели? хорошо, круто, но у меня есть еще один вопрос, скажем, я сделал внешний touchableOpacity как пользовательский компонент, как передать отключенные реквизиты его дочерним элементам? - person Nathan Priyasadie; 13.04.2020
comment
Можете ли вы опубликовать другой вопрос с примером? Тогда я могу ответить с примером кода. Я не уверен, что вы хотите сделать. - person CR7; 13.04.2020
comment
хорошо, но поскольку stackoverflow разрешает только 1 вопрос каждые 90 минут, вместо этого я просто обновляю вопрос. благодарю вас - person Nathan Priyasadie; 13.04.2020
comment
В вашем Maintcomponent вы можете добавить отключаемые реквизиты непосредственно в дочерних элементах CustomTouchable. - person CR7; 13.04.2020