如何禁用React Native核心Modal组件的“向下滑动关闭”功能？

嘿，这个需求很好解决！React Native核心Modal组件在iOS平台上默认开启了下滑关闭的手势交互，但如果你只想让用户通过自定义的Done按钮来关闭模态框，只需要给Modal加一个属性就能搞定：

• 给Modal组件添加swipeToClose={false}：这个属性就是专门用来控制是否允许滑动关闭模态框的，设置为false后，下滑关闭的手势就会被完全禁用。
• 同时别忘了保持你原本的逻辑：用visible状态来控制Modal的显示/隐藏，点击Done按钮时更新这个状态即可。

下面是一个完整的代码示例，你可以直接参考：

import React, { useState } from 'react';
import { View, Modal, Text, TouchableOpacity, StyleSheet } from 'react-native';

export default function CustomModalDemo() {
  const [isModalVisible, setIsModalVisible] = useState(false);

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => setIsModalVisible(true)}>
        <Text>打开模态框</Text>
      </TouchableOpacity>

      <Modal
        visible={isModalVisible}
        swipeToClose={false} // 关键：禁用滑动关闭功能
        animationType="slide"
        presentationStyle="pageSheet"
      >
        <View style={styles.modalInner}>
          <Text>这是模态框的内容区域</Text>
          <TouchableOpacity
            style={styles.doneBtn}
            onPress={() => setIsModalVisible(false)}
          >
            <Text>Done</Text>
          </TouchableOpacity>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalInner: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  doneBtn: {
    marginTop: 30,
    paddingVertical: 10,
    paddingHorizontal: 20,
    backgroundColor: '#f0f0f0',
    borderRadius: 6,
  },
});

额外提两个注意点：

• swipeToClose是React Native 0.63及以上版本才支持的属性，如果你的项目版本过低，建议升级RN版本，或者考虑使用第三方模态框库来实现更精细的交互控制。
• 这个属性仅对iOS平台生效，Android平台的Modal默认没有滑动关闭的交互，所以不需要额外处理。

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