React Native: кнопка за прозрачным представлением

В целях макета я визуализирую несколько изображений поверх своего представления в приложении React Native. Эти изображения расположены на верхней, левой и правой границах экрана. Они содержатся в компоненте View с прозрачным фоном.

Это означает, что все содержимое экрана будет находиться за этим компонентом View. У меня проблема в том, что сейчас я не могу прикоснуться к моему фактическому контенту, так как он покрыт прозрачным View.

Вопрос: Как я могу коснуться компонентов, которые находятся за прозрачным представлением в React-Native?

Я не могу быть первым, кто столкнется с этим, но, похоже, это плохо документировано в Интернете.

react-native button transparency user-experience

12.10.2018 10:31

Умерло ли Create-React-App?

В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.

Освоение React Native: Пошаговое руководство для начинающих

React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...

Ускоренная стилизация компонентов React Native с помощью NativeWind

В чем разница между react native и react ?

React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...

От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React

Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...

Хуки React: что это такое и как их использовать

Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...

2 917

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Простым решением было бы установить pointerEvents на none для вашего прозрачного View:

<View pointerEvents = "none">
  {/* your corner images */}
</View>

Определение из MDN:

In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.

Другие источники: