如何设置React Navigation模态框高度，使其仅覆盖屏幕下半部分？

我刚好做过类似App Store的半屏模态需求，用React Navigation v6可以轻松实现，下面是具体步骤和代码示例：

核心思路 #

React Navigation默认的全屏模态无法直接设置高度，我们需要通过**自定义样式插值器（cardStyleInterpolator）**来控制模态的尺寸、位置和动画，同时将需要的StackNavigator嵌套在模态屏幕中，实现完整的流程导航。

步骤1：自定义半屏模态的样式与动画 #

首先写一个自定义的插值函数，用来定义模态的高度、位置和滑入动画：

const halfScreenModalInterpolator = ({ current, layouts }) => {
  return {
    cardStyle: {
      position: 'absolute',
      bottom: 0,
      left: 0,
      right: 0,
      height: layouts.screen.height * 0.5, // 占据屏幕一半高度，可按需调整比例
      borderTopLeftRadius: 16, // 可选：给顶部加圆角，更贴近App Store风格
      borderTopRightRadius: 16,
    },
    overlayStyle: {
      backgroundColor: 'rgba(0, 0, 0, 0.5)', // 半透明背景，让下方视图可见
    },
    cardStyleInterpolator: {
      transform: [
        {
          translateY: current.progress.interpolate({
            inputRange: [0, 1],
            outputRange: [layouts.screen.height * 0.5, 0], // 从底部向上滑入
          }),
        },
      ],
    },
  };
};

步骤2：配置导航容器与嵌套Stack #

将这个插值函数应用到模态屏幕上，同时把购买流程的StackNavigator作为模态的组件：

import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';

const Stack = createStackNavigator();

// 主屏幕Stack
function MainStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      {/* 半屏模态屏幕 */}
      <Stack.Screen
        name="PurchaseModal"
        component={PurchaseFlowStack} // 嵌套的购买流程Stack
        options={{
          presentation: 'modal', // 指定为模态类型
          cardStyleInterpolator: halfScreenModalInterpolator, // 应用自定义样式
          headerShown: false, // 按需隐藏默认头部，用自定义头部替代
          gestureEnabled: true, // 支持手势下滑关闭模态
        }}
      />
    </Stack.Navigator>
  );
}

// 嵌套的购买流程Stack（模拟App Store的购买步骤）
function PurchaseFlowStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="ProductPick"
        component={ProductPickScreen}
        options={{ title: '选择产品' }}
      />
      <Stack.Screen
        name="PaymentMethod"
        component={PaymentMethodScreen}
        options={{ title: '支付方式' }}
      />
      <Stack.Screen
        name="ConfirmPurchase"
        component={ConfirmPurchaseScreen}
        options={{ title: '确认购买' }}
      />
    </Stack.Navigator>
  );
}

// 最终的导航容器
export default function App() {
  return (
    <NavigationContainer>
      <MainStack />
    </NavigationContainer>
  );
}

注意事项 #

• 版本兼容：以上代码基于React Navigation v6，如果使用v5，API会略有不同（比如cardStyleInterpolator的写法），建议升级到v6获得更好的兼容性。
• 高度调整：修改layouts.screen.height * 0.5中的0.5可以调整模态高度，比如0.6就是60%屏幕高度。
• 交互优化：可以给模态顶部添加拖拽手柄组件，提升用户体验，和App Store保持一致。
• 背景点击关闭：默认开启gestureEnabled: true后，用户可以下滑关闭模态；如果需要点击背景关闭，可以自定义遮罩组件并添加点击事件。

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