React Navigation v6 内置ScrollView的Modal滑至顶部触发下拉关闭

问题现象 #

使用react-navigation v6的modal呈现模式开发时，开启Modal下拉关闭手势后，若Modal内部嵌套ScrollView，下拉关闭手势仅能在Modal头部区域触发，ScrollView所在的内容区域无法触发该手势。

预期交互 #

当ScrollView滑动到顶部位置时，继续下拉操作即可触发Modal的关闭动画手势，效果如下：

项目运行环境：基于Expo开发

原有代码 #

导航配置 #

<RootStack.Group screenOptions={{ presentation: 'modal', cardOverlayEnabled: true, ...TransitionPresets.ModalPresentationIOS }}>
    <RootStack.Screen
       component={ModalPage}
       name="ModalPage"
       options={ModalPageNavOptions}
    />
</RootStack.Group>

Modal页面代码 #

<ScrollView nestedScrollEnabled>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
  <Text>TEST TEXT</Text>
</ScrollView>

问题原因 #

iOS风格模态的下拉关闭手势默认仅在头部区域响应，且原生ScrollView会在内容区域抢占滚动手势优先级，没有和外层模态的关闭手势做协商，导致内容区域下拉时只会触发ScrollView的回弹效果，不会触发模态关闭。

修复步骤 #

1. 修改导航配置，开启全区域手势响应
   给Modal所在的分组/页面添加两个关键配置，允许全屏区域响应下拉关闭手势：

   <RootStack.Group screenOptions={{ 
     presentation: 'modal', 
     cardOverlayEnabled: true, 
     fullScreenGestureEnabled: true, // 开启全区域下拉关闭手势
     gestureResponseDistance: 1000, // 扩大手势识别范围覆盖全屏
     ...TransitionPresets.ModalPresentationIOS 
   }}>
       <RootStack.Screen
          component={ModalPage}
          name="ModalPage"
          options={ModalPageNavOptions}
       />
   </RootStack.Group>
   

2. 替换滚动组件，自动处理手势协商
   将Modal内部使用的react-native原生ScrollView替换为react-native-gesture-handler提供的ScrollView，该组件会自动和外层模态手势做优先级协商：ScrollView未滚动到顶部时，优先响应内部滚动；滚动到顶部后继续下拉，自动触发模态关闭手势。
   Expo项目默认内置react-native-gesture-handler依赖，无需额外安装，直接修改导入即可：

   // 替换导入来源，不要从react-native导入ScrollView
   import { ScrollView } from 'react-native-gesture-handler';
   import { Text } from 'react-native';
   
   export default function ModalPage() {
     return (
       {/* 移除不需要的nestedScrollEnabled属性，开启bounces保证到顶回弹效果 */}
       <ScrollView bounces>
         <Text>TEST TEXT</Text>
         <Text>TEST TEXT</Text>
         <Text>TEST TEXT</Text>
         <Text>TEST TEXT</Text>
         <Text>TEST TEXT</Text>
         <Text>TEST TEXT</Text>
         <Text>TEST TEXT</Text>
         <Text>TEST TEXT</Text>
         <Text>TEST TEXT</Text>
         <Text>TEST TEXT</Text>
         <Text>TEST TEXT</Text>
         <Text>TEST TEXT</Text>
         <Text>TEST TEXT</Text>
         <Text>TEST TEXT</Text>
         <Text>TEST TEXT</Text>
         <Text>TEST TEXT</Text>
         <Text>TEST TEXT</Text>
         <Text>TEST TEXT</Text>
         <Text>TEST TEXT</Text>
       </ScrollView>
     )
   }
   

补充说明 #

• 该适配逻辑仅对iOS风格模态生效，安卓默认模态无下拉关闭交互，无需额外处理。
• 如果Modal内部使用FlatList、SectionList等其他滚动组件，同理替换为react-native-gesture-handler导出的对应组件即可实现相同效果。
• 原代码中的nestedScrollEnabled是安卓端嵌套滚动适配属性，iOS场景下不需要保留。

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