23

尽管本文档 ( 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 方法

我在监督什么吗？

4

3 回答 3

35

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

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

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

import { TouchableOpacity } from 'react-native';
于 2020-04-25T08:35:20.987 回答
3

你可以只TouchableWithoutFeedback用来包裹 inner 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>
于 2018-01-25T11:19:15.450 回答
3

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

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

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

于 2019-11-15T05:57:43.277 回答