Modal 上没有指针事件

Posted 2023-02-24

【中文标题】Modal 上没有指针事件

【英文标题】：No pointer events on Modal

【发布时间】：2017-06-17 03:25:33

【问题描述】：

有没有办法在Modal 上将pointerEvents 设置为none？我正在尝试在其父母范围之外渲染子视图，而我能做到这一点的唯一方法是使用Modal。忽略孩子的pointerEvents 似乎不起作用。

<View>
  <View style=flex: 1, backgroundColor: 'red'></View>
  <Modal
    animationType='fade'
    transparent=true
    visible=true
    pointerEvents='none'>
    <View style=flex:1, alignItems: 'center', justifyContent: 'center' pointerEvents='none'>
    </View>
  </Modal>
</View>

【问题讨论】：

你能解决吗？ ...我尝试过高度，边距...但没有。

您好，您能解决这个问题吗？我也需要这样做。

您使用的是哪种模式？

【参考方案1】：

我不知道你是不是这个意思，因为你的描述对我来说不够清楚......但我前段时间还需要一个 Modal，如果我点击应用程序中的任何地方，它不应该关闭，但是仅当我执行给定的操作时（对我来说，它是在给定的点击路径之后模态中的 Buttonclick）。

这就是我解决它的方法：我使用react-native-modalbox，它做得非常好。

通过大量可能的选项，您还可以处理模态的点击行为。

一个小例子：

import Modal from 'react-native-modalbox';
 ... 
 ...
        <Modal
          style=[styles.audioToolbarModal, styles.audioToolbarBottomModal]
          position="bottom"
          backdrop
          swipeToClose=false
          coverScreen
          onOpened=() => this.startRecording()
          isDisabled=modalIsDisabled
          ref=(ref) =>  this.audioToolbar = ref; 
        >

您可能需要的属性是“isDisabled”（通过 State 设置它以切换它）和swipeToClose=false

希望对你有所帮助。