如何修改@gorhom/bottom-sheet的BottomSheetModal底部圆角与边距？

你之前的问题出在边距和圆角的作用层级不对，直接给BottomSheetModal加margin会被组件内部布局覆盖，同时全圆角的设置不符合底部圆角的需求。下面是具体的修正方案：

1. 调整BottomSheetModal的属性配置 #

移除BottomSheetModal上的style属性，转而通过背景组件和列表容器控制边距与内容间距：

<BottomSheetModal
  ref={yearBottomSheetModalRef}
  index={0}
  snapPoints={snapPoints}
  backdropComponent={renderBackdrop}
  handleIndicatorStyle={{backgroundColor: '#E8EAED'}}
  bottomInset={170}
  backgroundComponent={renderBackground}
>
  <BottomSheetFlatList 
    data={YEAR_DATA} 
    renderItem={yearRenderItem}
    // 给列表内容加内边距，避免内容贴合背景边缘
    contentContainerStyle={{paddingHorizontal: 16, paddingBottom: 17}}
  />
</BottomSheetModal>

2. 修改BottomSheetBackground组件 #

将边距、底部圆角直接定义在背景组件的样式中，并正确合并传入的style：

import {View} from 'react-native';
import React from 'react';

const BottomSheetBackground = ({style}: any) => {
  return (
    <View
      style={[
        {
          backgroundColor: 'red',
          // 仅设置底部圆角
          borderBottomLeftRadius: 20,
          borderBottomRightRadius: 20,
          // 设置左右及底部边距
          marginHorizontal: 16,
          marginBottom: 17,
          overflow: 'hidden',
        },
        style,
      ]}
    />
  );
};

export default BottomSheetBackground;

关键说明 #

• 把边距放在backgroundComponent中，是因为它是模态框的背景容器，能直接影响模态框的视觉边界；
• 给BottomSheetFlatList的contentContainerStyle加内边距，是为了让列表内容和背景边缘保持合适间距，避免内容贴边；
• 使用borderBottomLeftRadius和borderBottomRightRadius精准设置底部圆角，替代全圆角的borderRadius。

内容的提问来源于stack exchange，提问作者김지수