React Navigation模态屏返回时顶部圆角问题的解决方法咨询

问题场景 #

在Expo应用中使用React Navigation，包含「分类列表」页面和以modal模式展示的「添加分类」页面。从分类列表页右上角打开模态页，关闭模态页返回列表页时，页面顶部会短暂出现圆角后消失。

依赖版本：

"@react-navigation/native": "^6.1.4",
"@react-navigation/stack": "^6.3.14",

模态页配置代码：

<Stack.Navigator>
  <Stack.Screen
    options={{
      presentation: "modal",
    }}
    name="AddCategory"
    component={AddEditCategory}
  />
</Stack.Navigator>

官方回应 #

模态屏应在根层级使用，嵌套在Tab Navigator中不符合合理的UX设计。
虽然视觉上不需要，但该圆角是为性能考量特意添加的，在预期使用场景下运行正常，因此不会修改。
若因某些原因确实需要在Tab Navigator中嵌套模态屏，可自定义cardStyleInterpolator来设置不同的圆角值。

解决方案 #

方案1：遵循官方UX设计（优先推荐） #

将模态屏移至根导航层级，避免嵌套在Tab Navigator内部。这种方式既符合官方推荐的交互逻辑，也能从根源上消除圆角闪烁问题。

方案2：自定义cardStyleInterpolator移除圆角 #

如果必须保留嵌套结构，可以通过自定义插值器覆盖默认样式，彻底消除圆角闪烁：

方式一：完全自定义模态插值器

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

const customModalInterpolator = ({ current, layouts }) => {
  return {
    cardStyle: {
      borderRadius: 0, // 强制设置圆角为0
      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],
      }),
    },
  };
};

// 在模态屏配置中使用
<Stack.Navigator>
  <Stack.Screen
    options={{
      presentation: "modal",
      cardStyleInterpolator: customModalInterpolator,
    }}
    name="AddCategory"
    component={AddEditCategory}
  />
</Stack.Navigator>

方式二：基于默认插值器修改

import { CardStyleInterpolators } from '@react-navigation/stack';

// 在模态屏配置中直接修改
<Stack.Navigator>
  <Stack.Screen
    options={{
      presentation: "modal",
      cardStyleInterpolator: ({ current, ...rest }) => {
        const defaultStyles = CardStyleInterpolators.forModalPresentationIOS({ current, ...rest });
        return {
          ...defaultStyles,
          cardStyle: {
            ...defaultStyles.cardStyle,
            borderRadius: 0,
          },
        };
      },
    }}
    name="AddCategory"
    component={AddEditCategory}
  />
</Stack.Navigator>

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