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

Question

我想嵌套多个可触摸组件以创建类似于 facebook 帖子的内容，用户可以在其中按下头像图像或用户名并导航到用户个人资料，用户也可以按下卡的 rest 并导航到单个帖子屏幕。 当我嵌套多个组件并按下子组件（即头像/用户名组件）组件时，触摸会从子组件传播到父组件，即父组件的 onPress 事件也会被触发。 我该如何处理这种情况？？ 在下面的示例中，如果我按下 AvatarComponent，那么孩子和父母的 onPress 事件都会被触发。 我只希望当我按下 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。