React-Native如何实现下拉滑动关闭Modal模态框？

核心问题1：属性类型错误 #

React Native官方Modal的swipeDirection属性要求传入字符串数组，你当前传入的是字符串"down"，属于类型不匹配，手势逻辑完全不会触发。

核心问题2：属性冲突 #

你同时配置了transparent={true}和presentationStyle="pageSheet"，两个属性存在冲突：presentationStyle设置为pageSheet时系统会自带模态遮罩和原生滑动手势逻辑，transparent={true}会破坏手势响应链，导致滑动事件无法被Modal捕获。

其他注意点 #

1. 原生Modal的滑动关闭能力仅支持iOS平台，安卓端需要该能力可引入第三方库react-native-modal实现。
2. 你的代码中缺少useState的导入，运行时会抛出异常，需要在react的导入语句中补充。

修复后的代码示例 #

首先修改导入部分：

// 新增useState导入
import React, { useState } from 'react';
import {
  KeyboardAvoidingView,
  Platform,
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  ScrollView,
  Image,
  TouchableOpacity,
  Modal,
} from "react-native";

然后修改Modal组件的属性：

<Modal
  animationType="slide"
  visible={modalOpen}
  presentationStyle="pageSheet"
  onSwipeComplete={() => setModalOpen(false)}
  swipeDirection={['down']} // 改为数组格式
  // 删除transparent={true}配置
>
  <View style={styles.HinzufuegenModal}>
    <Text>Hello!</Text>
  </View>
</Modal>

如果需要保留半透明背景效果，可删除presentationStyle配置，改用第三方模态组件实现滑动关闭逻辑，原生Modal在透明模式下不支持滑动手势。

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