您可以像这样添加TouchableOpacity和具有状态的控件;

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

尝试使用npm https://github.com/react-native-modal/react-native-modal来获得更多功能，例如在modal的外部按下隐藏modal。
设置onBackDropPress道具并关闭模态上的事件。

我在这里的答案处理相同的问题，并且与本机Modal组件一起工作得很好。
基本上使用react-native的Pressable组件作为背景，并检查您单击的内容，如下所示：

onPress={(event) => event.target == event.currentTarget && setVisible(false)}

https://stackoverflow.com/a/70086023/6212453

onBackdropPress prop将帮助您实现这一点;

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

更多详情here

编辑

今天得到了一个反对票，所以只是检查了这个答案，我张贴了近2年前。
以上答案适用于react-native-modal包。
对于情态从React原生;
要关闭backdroppress上的模态，我们可以在模态中使用一个视图，在视图上使用onTouchEnd属性，并在那里使用关闭函数;

const [visible, setVisible] = useState(true)

<Modal visible={visible}>
  <View onTouchEnd={() => setVisible(false)}>

    ...Your content inside the modal
  </View>
</Modal>

但是这种方法有一个问题（对不起，我不知道解决方案），当我们单击视图或视图中的任何内容时，模态将关闭。