关闭React Native Modal后界面无响应冻住的问题该如何解决

修复步骤 #

• 补全Modal必填属性
  安卓端原生Modal强制要求配置onRequestClose属性，缺失该属性会大概率出现Modal关闭后触摸事件被隐形拦截、UI无响应的问题，直接在Modal标签中添加如下配置即可：

  <Modal
      animationType="slide"
      transparent={true}
      visible={modalVisible}
      // 新增以下配置
      onRequestClose={() => setModalVisible(false)}
  >
  

• 替换触摸事件触发类型
  当前使用的onPressOut事件触发时序和普通点击事件存在冲突可能，容易导致状态更新时序异常，Modal没有被正确卸载。把空白区域的触摸事件从onPressOut改为onPress即可：

  <TouchableOpacity style={{ height: '65%' }} onPress={() => setModalVisible(false)} >
  </TouchableOpacity>
  

• 检查Modal容器样式
  确认styles.modalContainer没有设置异常高的zIndex或者固定定位残留，避免Modal标记为不可见后，容器层级仍停留在视图最上层拦截所有触摸事件。
• 兼容低版本React Native异常
  如果你使用的是0.62~0.64区间的React Native版本，属于原生Modal的已知兼容bug，可以直接替换为社区成熟的react-native-modal库，规避原生实现的兼容问题。

内容的提问来源于stack exchange，提问作者Rita Z