javascript - 如何通过在React Native中点击屏幕来消除模态

如何通过在React Native中点击屏幕来关闭模态视图，RN Modal组件似乎未提供api

最佳答案

您可以将模态组件内的TouchableWithoutFeedback组件与onPress属性一起使用，该onPress属性可以消除模态。

<Modal visible={booleanThatHandlesModalVisibility}>
  <TouchableWithoutFeedback onPress={() => funcToHideModal()}>
    <View>
    ...
    </View>
  </TouchableWithoutFeedback>
</Modal>

如果希望模态区域在打印时不隐藏模态，则可以添加另一个不带onPress属性的TouchableWithoutFeedback，以在第一个事件之前捕获事件，如下所示:

<Modal visible={booleanThatHandlesModalVisibility}>
  <TouchableWithoutFeedback onPress={() => funcToHideModal()}>
    <View>
      <TouchableWithoutFeedback>
        <View>...</View>
      </TouchableWithoutFeedback>
    </View>
  </TouchableWithoutFeedback>
</Modal>