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

在此处撰写文字，使其更加突出。

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

可悲的是，我第一次错过了她的评论，因此希望这对其他人有帮助

另一个TouchableOpacity内的Stacked TouchableOpacity无法点击

3 个答案: