另一个 TouchableOpacity 内的堆叠 TouchableOpacity 不可点击答案

【问题标题】：Stacked TouchableOpacity inside another TouchableOpacity is not clickable另一个 TouchableOpacity 内的堆叠 TouchableOpacity 不可点击
【发布时间】：2017-11-19 10:53:50
【问题描述】：

尽管本文档 (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 中的 Button 也是如此：点击 Button 会调用父 TouchableOpacity 的 onPress 方法

我在监督什么吗？

【问题讨论】：

我在使用来自react-native 的TouchableOpacity 和来自react-native-gesture-handler 的另一个组合时遇到了这个问题。当使用相同的两次时，它会按预期工作，孩子是唯一触发新闻事件的人。
@EliezerSteinbock 谢谢...我遇到了和你提到的一样的问题。

标签： android react-native touchableopacity

【解决方案1】：

从以下位置更改 Touchable 不透明度的导入：

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

到以下，现在一切都会好起来的：

import { TouchableOpacity } from 'react-native';

【讨论】：

我从react-native 导入了相同的内容，但它不起作用。
我不得不在项目中添加react-native-gesture-handler 依赖，因为它是@react-navigation/stack 的对等依赖。这给自动导入带来了痛苦，因为TouchableOpacity 现在有两个依赖项......
谢谢 - 这有帮助！

【解决方案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>

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

宾果游戏！ ...该死的react-native-gesture-handler :-)