react-native - Modal 上没有指针事件

Question

有没有办法设置pointerEvents至none在 Modal ?我正在尝试在其 parent 范围之外渲染 subview ，我能做到这一点的唯一方法是使用 Modal .忽略 pointerEvents对 child 似乎不起作用。

<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>

Answer 1

我不知道你是不是这个意思，因为你的描述对我来说不够清楚......但我前段时间还需要一个模态，如果我点击应用程序中的任何位置，它不应该关闭，但前提是我做一个给定的 Action (对我来说，在给定的点击路径之后，它是模态中的一个 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}
我希望，这可以帮助你。