另一个TouchableOpacity内的Stacked 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

您可以只使用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>

Answer 3

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

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

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