无法单击另一个TouchableOpacity内的堆叠TouchableOpacity

Question

尽管本文档(https://facebook.github.io/react-native/docs/gesture-responder-system.html)指出，触摸事件被传递给子对象，并且只由父对象使用，但是如果子对象没有对事件做出反应，我就会面对这样的问题:嵌套在另一个TouchableOpacity中的TouchableOpacity不能正确地对接触做出反应。

我的结构如下

<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中的按钮也是如此:单击按钮将调用父TouchableOpacity的onPress方法

我在监督什么吗？

Answer 1

从以下位置更改可触摸不透明度的导入：

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

下面的代码，现在一切都会好的：

import { TouchableOpacity } from 'react-native';

Answer 2

写在这里是为了让它更突出一点。

正如@EliezerSteinbock所提到的，可能是嵌套的TouchableOpacity是从不同于父对象的内容导入的。这是很有可能的，因为我们中的许多人在可视化代码或其他IDE上使用自动导入。

遗憾的是，我第一次错过了她的评论，所以希望这能对其他人有所帮助

Answer 3

您可以只使用TouchableWithoutFeedback包装内部的TouchableOpacity。

类似于：

<TouchableOpacity onPress={() => console.log('This is printed always')}>
    <View>
        <Text>I can click here</Text>
        <TouchableWithoutFeedback>
            <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>
        </TouchableWithoutFeedback>
    </View>
</TouchableOpacity>