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

【问题标题】：How do I nest multiple touchable components?如何嵌套多个可触摸组件？
【发布时间】：2020-07-10 07:00:49
【问题描述】：

我想嵌套多个可触摸组件来创建类似于 facebook 帖子的内容，用户可以按下头像图像或用户名并导航到用户个人资料，用户也可以按下卡片的其余部分并导航到单个帖子屏幕。当我嵌套多个组件并按下子组件（即头像/用户名组件）组件时，触摸会从子组件传播到父组件，即父组件的 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>

【问题讨论】：

为什么你甚至需要在一个可触摸的内部有一个可触摸的？
创建类似于 facebook 帖子的内容....其中有多个 onPress...头像、用户名、帖子本身、like 按钮、评论按钮、分享按钮

标签： reactjs react-native react-native-android react-native-ios react-native-navigation

【解决方案1】：

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

从“react-native”导入 { TouchableOpacity }

【讨论】：

【解决方案2】：

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

【讨论】：