React Navigation iOS：禁用模态框父页面缩放并实现下滑关闭

一、禁用父页面缩放效果 #

使用presentation: "modal"时，React Navigation默认会给父页面添加缩放动画。要禁用该效果，需自定义cardStyleInterpolator覆盖默认动画逻辑，让父页面保持原尺寸：

import { Animated } from 'react-native';

// 自定义插值函数，移除父页面缩放行为
const noParentScaleInterpolator = ({ current, layouts }) => {
  return {
    cardStyle: {
      transform: [
        {
          translateY: current.progress.interpolate({
            inputRange: [0, 1],
            outputRange: [layouts.screen.height, 0],
          }),
        },
      ],
    },
    overlayStyle: {
      opacity: current.progress.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 0.5], // 背景透明度可按需调整
      }),
    },
    // 强制父页面无缩放变换
    containerStyle: {
      transform: [],
    },
  };
};

// 在Stack.Screen中应用配置
<Stack.Screen
  name="testModal"
  component={ChatAttachments}
  options={{
    headerShown: false,
    presentation: "modal",
    cardOverlayEnabled: true,
    gestureDirection: "vertical",
    gestureResponseDistance: 500,
    cardStyle: {
      backgroundColor: "transparent",
      opacity: 1,
    },
    cardStyleInterpolator: noParentScaleInterpolator,
  }}
/>

二、同时实现透明背景和下滑关闭 #

presentation: "transparentModal"默认禁用垂直下滑手势，因此最佳方案是继续使用presentation: "modal"，配合上述自定义插值器+透明cardStyle，既能保留下滑关闭功能，又实现透明背景，同时禁用父页面缩放（即上面的完整配置）。

额外注意点：

• 确保ChatAttachments组件自身的背景为半透明或自定义样式，避免完全遮挡父页面
• 通过调整overlayStyle的透明度，可匹配Instagram模态框的背景遮罩效果

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