如何修改@react-navigation/native-stack中formSheet后台屏幕的borderRadius？

• 你之前用contentStyle设置圆角没用，因为这个属性是控制屏幕内部内容的样式，而后台模态显示的圆角是导航器包裹屏幕的**容器（card）**的裁剪样式，得用cardStyle来设置。

• 修改代码如下，把前后台的圆角都通过cardStyle配置，就能保证一致：

<Stack.Screen
  options={{
    gestureEnabled: false,
    headerShown: false,
    cardStyle: {
      borderRadius: 30, // 和前台保持相同值
      backgroundColor: 'red',
    },
  }}
  name={HomeStackKeys.DASHBOARD}
  component={Dashboard}
/>
<Stack.Screen
  options={{
    presentation: 'formSheet',
    headerShown: false,
    cardStyle: {
      backgroundColor: 'red',
      borderRadius: 30,
      padding: margins.general_padding2x,
    },
  }}
  name={HomeStackKeys.SETTINGS}
  component={Settings}
/>

• 如果上述方法没生效，试试在创建导航栈时全局配置screenOptions，强制统一card的圆角：

const HomeStack = createNativeStackNavigator({
  screenOptions: {
    cardStyle: {
      borderRadius: 30,
    },
  },
  // ...你的屏幕配置
});

• 原理：formSheet模态打开时，后台显示的是底层屏幕的导航器容器（card），这个容器的圆角由cardStyle.borderRadius控制，而非屏幕内部的contentStyle。

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