Как вложить несколько сенсорных компонентов?

Question

Я хочу вложить несколько сенсорных компонентов для создания чего-то похожего на сообщение в facebook, где пользователь может нажать на изображение аватара или имя пользователя и перейти к профилю пользователя, также пользователь может нажать на остальную часть карты и перейти к экрану отдельного сообщения. Когда я вкладываю несколько компонентов и нажимаю на дочерний компонент (ie Аватар / компонент имени пользователя), прикосновение передается от дочернего к родительскому ie событие onPress родителя также запускается. Как мне справиться с этой ситуацией ?? В приведенном ниже примере, если я нажимаю AvatarComponent, запускаются дочернее и родительское событие onPress. Я хочу, чтобы onPress ребенка запускался только при нажатии на Child.

 <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

попробуйте передать zIndex: 999 в стиле дочернего компонента.

Answer 2

Попробуйте изменить импорт на «react-native», если вы используете обработчик жестов:

import {TouchableOpacity} from 'react-native'