Блог

У меня есть два сенсорных элемента, которые перекрываются. Щелчок по области перекрытия приводит к срабатыванию их обоих. Я хочу, чтобы запускалось только дочернее событие onPress (т. Е. Только функция onUpVote / onDownVote).

 <TouchableHighlight onPress={onPress} underlayColor={colors.focus}>
  <View style={styles.container}>
    <AppText>{question.content}</AppText>
    <View style={styles.voteContainer}>
      <UpVoteButton
        voted={voted}
        voteCount={question.upVotes}
        onPress={onUpVote}
      />
      <DownVoteButton
        voted={false}
        voteCount={question.downVotes}
        onPress={onDownVote}
      />
    </View>
  </View>
</TouchableHighlight>
  

и это элемент VoteButton

 <TouchableWithoutFeedback onPress={onPress}>
  <View style={styles.voteContainer}>
    <AppText style={styles.voteCount}>{voteCount}</AppText>
    <AntDesign
      name={voted ? "like1" : "like2"}
      style={{
        fontSize: 18,
        color: defaultStyles.colors.focus,
        paddingBottom: 3,
      }}
    />
  </View>
</TouchableWithoutFeedback>
  

Идея заключается в том, что если пользователь нажимает большими пальцами вверх / вниз на область значков, то onDownVote обрабатывается. Предполагается, что нажатие в любом другом месте элемента списка приведет вас к другому экрану.

Макет приложения

Я бы предложил импортировать TouchableOpacity отсюда: https://github.com/software-mansion/react-native-gesture-handler

Оба перекрывающихся сенсорных элемента должны сработать onPress prop