通过覆盖传递触摸事件

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
      }
    }
  }
});

如果要渲染全屏，则可能还需要设置其最高视图pointerEvents道具（在上例中的myComponent上）。

Answer 3

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

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

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

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

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

 }

Answer 4

尝试使用proppointerEvents ='box-none'或参阅this问题