javascript - 通过 Overlay 传递触摸事件

Question

设置

我有 2 个屏幕，我们称它们为 A 和 B。

屏幕 A 显示由手机后置摄像头记录的摄像头图像（我无法进一步访问的第三方库）。屏幕 B 具有半透明背景和一些 UI 元素（例如按钮）

任务

我不能直接（第三方）将 UI 元素添加到屏幕 A，这就是为什么我使用react-native-navigation V2通过Navigation.showOverlay在屏幕 A 上覆盖屏幕 B。

问题

两个屏幕都需要对触摸事件做出反应，但屏幕 B 的覆盖似乎阻止了屏幕 A 上的这些事件。

问题

是否有可能将所有触摸事件从屏幕 B（带有覆盖的 UI）向下传递到屏幕 A（也需要对触摸事件做出反应的相机屏幕），以便两个屏幕都能够对用户输入做出反应？

---

如果有人对我正在谈论的第三方组件感兴趣：https ://github.com/brave-digital/react-native-wikitude/issues/10

Answer 1

而不是使用 react-native-navigation showOverlay，使用可以使用

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

Answer 2

显示导航覆盖时，您可以使用其选项来控制触摸拦截。尝试像这样配置它，并注意interceptTouchOutside覆盖选项：

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

如果你渲染一个全屏，你可能还需要设置它的 topmost view 属性pointerEvents（在myComponent上面的例子中）。

Answer 3

也许您可以使用按钮/可触摸的不透明度来使用功能打开相机屏幕（使其成为焦点......）这样两个屏幕都可以接收用户输入。

将另一个屏幕作为新实例打开的功能可能是两个屏幕独立响应用户输入的最佳选择。

下面的代码是可以放在 UI 屏幕上的按钮/可触摸不透明度的示例代码。

例如<Button onPress = { this.fnOpenCamera } title = 'Camera View'/>

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

 }

Answer 4

尝试 prop pointerEvents='box-none' 或参考这个问题