在Modal外部单击时关闭Modal

Question

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

Answer 1

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

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

Answer 2

onBackdropPress prop会帮你做到这一点；

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

更多详细信息here

Answer 3

你可以像这样添加TouchableOpacity和状态控制；

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