在其外部单击时关闭模态

Question

我创建了一个模态，其中有两个基于按钮单击的按钮，模态将被关闭，但我也想在它外部单击时关闭模态，我该如何实现？

Answer 1

尝试使用 npm https://github.com/react-native-modal/react-native-modal 获得更多功能，例如在模态的外部按下时隐藏模态。

设置 onBackDropPress 道具并关闭事件的模态。

Answer 2

onBackdropPress 道具将帮助您获得它；

<Modal
  isVisible={isModalVisible}
  onBackdropPress={() => setModalVisible(false)}>
  <View style={{flex: 1}}>
    <Text>I am the modal content!</Text>
  </View>
</Modal>

更多详情here

Answer 3

您可以像这样添加 TouchableOpacity 并使用 state 进行控制；

<Modal
  visible={isDialogVisible}
  onRequestClose={() => {
  }}>
    <TouchableOpacity
      style={{flex:1}}
      onPress={() => {
        setIsDialogVisible(false)
      }}>
     {.....your code.....}
   </TouchableOpacity>
 </Modal