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

Question

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

Answer 1

您可以在模态组件中使用 TouchableWithoutFeedback 组件，并使用 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>