Пропуск сенсорных событий через оверлей

Question

Настройка

У меня есть 2 экрана, назовем их A и B.

Экран A показывает изображение с камеры, записанное задней камерой телефона (сторонняя библиотека, к которой у меня нет дальнейшего доступа). Экран B имеет полупрозрачный фон и некоторые элементы пользовательского интерфейса (например, кнопки)

Задача

Я не могу добавить элементы пользовательского интерфейса непосредственно на экран A (третье лицо), поэтому я использую response-native-navigation V2 для наложения экрана B через Navigation.showOverlay on верх экрана А.

Проблема

Оба экрана должны реагировать на сенсорные события, но кажется, что наложение экрана B блокирует эти события на экране A.

Вопрос

Возможно ли как-то передать все сенсорные события с экрана B (пользовательский интерфейс с наложением) на экран A (экран камеры, который также должен реагировать на сенсорные события), чтобы оба экрана могли реагировать на ввод пользователя?

---

В случае, если кто-то заинтересован в стороннем компоненте, я имею в виду: https://github.com/brave-digital/react-native-wikitude/issues/10

Answer 1

Возможно, вы можете использовать кнопку / сенсорную непрозрачность, чтобы открыть экран камеры, используя функцию (чтобы сфокусировать ее ...). Таким образом, оба экрана могут принимать пользовательский ввод.

Функция открытия другого экрана в качестве нового экземпляра, вероятно, будет наилучшей для обоих экранов, независимо реагирующих на ввод данных пользователем.

Приведенный ниже код является примером кода, который можно поместить в такую ​​кнопку / непрозрачную непрозрачность на экране пользовательского интерфейса.

например <Button onPress = { this.fnOpenCamera } title = 'Camera View'/>

fnOpenCamera = () =>
 {
    this.props.navigation.navigate('ScreenA');

 }

Answer 2

Вместо использованияоминер-навигация showOverlay, используйте можно

<View style={{flex: 1}}>
  <ScreenA />
  <View style={{position: "absolute", height: screenHeight, width: screenWidth}} pointerEvents={'box-none'}>
    <ScreenB />
  </View>
</View>

Answer 3

При отображении оверлея Навигации вы можете использовать его параметры для управления перехватом касания. Попробуйте настроить его следующим образом и обратите внимание на параметр оверлея interceptTouchOutside:

Navigation.showOverlay({
  component: {
    id: 'myComponent',
    name: 'myComponent',
    passProps,
    options: {
      layout: {
        backgroundColor: 'transparent',
        componentBackgroundColor: 'transparent'
      },
      overlay: {
        interceptTouchOutside: false
      }
    }
  }
});

Если вы визуализируете полноэкранный режим, вам также может потребоваться установить его самый верхний вид pointerEvents prop (на myComponent в приведенном выше примере).

Answer 4

try prop pointerEvents = 'box-none' или ссылаются на этот вопрос