不可点击另一个TouchableOpacity中堆叠的TouchableOpacity [英] Stacked TouchableOpacity inside another TouchableOpacity is not clickable

问题描述

即使该文档( https://facebook.github.io/react-native/docs/gesture-responder-system.html )指出，如果孩子对事件没有反应，则触摸事件会传递给孩子，并且仅由父母消耗，我面临的问题是，嵌套在另一个TouchableOpacity内的TouchableOpacity在触摸时无法正确反应.

Even though this document (https://facebook.github.io/react-native/docs/gesture-responder-system.html) states, that touch events are passed down to the children and are only consumed by a parent, if the child doesn't react on the event, I face the issue, that a TouchableOpacity nested inside another TouchableOpacity doesn't react properly on touches.

我的结构如下

<ScrollView>
  <TouchableOpacity onPress={() => console.log('This is printed always')}>
    <View>
      <Text>I can click here</Text>
      <TouchableOpacity onPress={() => console.log('This is printed never')}>
        <Text>I can click here but the outer onPress is called instead of the inner one</text>
      </TouchableOpacity>
    </View>
  </TouchableOpacity>
</ScrollView>

TouchableOpacitys内部的Button也会发生同样的情况:单击Button会调用父级TouchableOpacity的onPress方法

The same happens for Buttons inside TouchableOpacitys: Clicking the Buttons calls the onPress method of the parent TouchableOpacity

我正在监督什么吗?

推荐答案

更改可触摸不透明度的导入来源

Change import of Touchable opacity from

import { TouchableOpacity } from 'react-native-gesture-handler';

接下来，一切都会很好！

To the following and it will now all be fine!

import { TouchableOpacity } from 'react-native';

这篇关于不可点击另一个TouchableOpacity中堆叠的TouchableOpacity的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！