React Native模态框如何禁止外部点击关闭，仅通过关闭按钮关闭？

问题出在你用TouchableWithoutFeedback包裹了弹窗，并且给它绑定了setVisible(false)的点击事件——只要点击这个组件覆盖的外部区域，就会触发关闭逻辑。

要实现仅点击关闭按钮才关闭弹窗，直接移除包裹弹窗的TouchableWithoutFeedback组件就行，这样外部点击不会触发任何关闭操作，只有点击你专门设置的关闭按钮时才会执行setVisible(false)。

举个修改前后的代码对比：

修改前（点击外部会关闭） #

<TouchableWithoutFeedback onPress={() => { setVisible(false); }}>
  <View style={modalContainer}>
    {/* 弹窗内容 */}
    <TouchableOpacity onPress={() => setVisible(false)}>
      <Text>关闭</Text>
    </TouchableOpacity>
  </View>
</TouchableWithoutFeedback>

修改后（仅点击关闭按钮关闭） #

<View style={modalContainer}>
  {/* 弹窗内容 */}
  <TouchableOpacity onPress={() => setVisible(false)}>
    <Text>关闭</Text>
  </TouchableOpacity>
</View>

内容的提问来源于stack exchange，提问作者B.Shridhar