如何移除NativeBase（v3.0.*）中ActionSheet的顶部borderRadius？

你可以通过以下两种方式实现需求：

方式一：单个ActionSheet自定义样式 #

直接在ActionSheet组件上通过_content属性覆盖内部容器的圆角样式：

import { ActionSheet, Button, useDisclose } from 'native-base';

export default function YourComponent() {
  const { isOpen, onOpen, onClose } = useDisclose();
  const options = ['选项1', '选项2', '取消'];
  const cancelIndex = 2;

  return (
    <>
      <Button onPress={onOpen}>打开ActionSheet</Button>
      <ActionSheet
        isOpen={isOpen}
        onClose={onClose}
        options={options}
        cancelIndex={cancelIndex}
        _content={{
          borderTopLeftRadius: 0,
          borderTopRightRadius: 0
        }}
      />
    </>
  );
}

方式二：全局修改Theme（所有ActionSheet生效） #

如果需要项目中所有ActionSheet都去掉顶部圆角，可以扩展NativeBase的主题：

import { NativeBaseProvider, extendTheme } from 'native-base';
import YourApp from './YourApp';

const customTheme = extendTheme({
  components: {
    ActionSheet: {
      baseStyle: {
        _content: {
          borderTopLeftRadius: 0,
          borderTopRightRadius: 0
        }
      }
    }
  }
});

export default function Main() {
  return (
    <NativeBaseProvider theme={customTheme}>
      <YourApp />
    </NativeBaseProvider>
  );
}

原理说明：NativeBase v3的ActionSheet默认给内容容器设置了顶部圆角，通过设置borderTopLeftRadius和borderTopRightRadius为0，就能完全移除顶部圆角，匹配你想要的效果。

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