如何嵌套多个可触摸组件？

Question

我想嵌套多个可触摸组件来创建类似于 facebook 的东西 post 用户可以在其中按下头像或用户名并导航到用户个人资料，用户也可以按下卡片的其余部分并导航到单个 post 屏幕。当我嵌套多个组件并按下子组件（即 Avatar/User 名称组件）组件时，触摸会从子组件传播到父组件，即父组件的 onPress 事件也会被触发。我该如何处理这种情况？？ 在下面的示例中，如果我按下 AvatarComponent，那么子项和父项的 onPress 事件都会被触发。我只希望在按下 Child 时触发 child 的 onPress。

 <TouchableOpacity onPress={() => console.log('parent component')}>
            <TouchableOpacity onPress={() => console.log('child component')}>
              <AvatarComponent />
            </TouchableOpacity>
            <TouchableOpacity onPress={() => console.log('child component')}>
              <UsernameComponent />
            </TouchableOpacity>
</TouchableOpacity>

Answer 1

如果您使用的是手势处理程序，请尝试将导入更改为“react-native”：

从 'react-native'

导入 { TouchableOpacity }

Answer 2

尝试在子组件的样式中传递 zIndex:999。