React Navigation Modal页面出现多余底部圆角该如何解决？

这个问题是iOS 15及以上版本系统默认的UISheetPresentationController模态弹窗自带的底部圆角效果，不属于React Native组件渲染的样式，所以修改页面内View的borderRadius不会生效，可通过以下方案解决：

• 方案1：导航配置直接修改系统 sheet 圆角
  适配@react-navigation/native-stack v6+版本，直接在对应模态路由的配置项中添加sheetCornerRadius参数即可：

<Stack.Screen
  name="YourModalRoute"
  component={YourModalPage}
  options={{
    presentation: "modal",
    // 将系统默认sheet圆角设为0
    sheetCornerRadius: 0,
    // iOS 16+可额外添加该配置避免退出时的圆角残留
    sheetExpandsWhenScrolledToEdge: false,
  }}
/>

• 方案2：适配页面安全区填充
  如果调整导航配置后，页面销毁退出过程中仍有圆角残留，可调整模态页面的根节点样式，让页面背景完全铺满窗口底部区域：

import { SafeAreaView, StyleSheet } from 'react-native'

// 根节点样式
const styles = StyleSheet.create({
  root: {
    flex: 1,
    // 和页面背景色保持一致
    backgroundColor: '#ffffff',
  }
})

// 仅适配顶部安全区，底部直接铺满窗口
<SafeAreaView style={styles.root} edges={['top']}>
  {/* 页面内容 */}
</SafeAreaView>

• 方案3：切换为全屏模态类型
  如果你不需要系统默认的下拉关闭手势，直接将presentation属性改为fullScreenModal即可完全去掉系统sheet的所有默认样式，包括底部圆角：

options={{
  presentation: "fullScreenModal",
}}

内容的提问来源于stack exchange，提问作者спасибо