如何自定义react-native-paper库中SegmentedButtons的样式？

react-native-paper的SegmentedButtons默认样式是圆角带边框的，直接通过普通StyleSheet或内联样式设置borderRadius:0、borderWidth:0无效，是因为组件的核心样式由内部theme系统管控，需要通过以下方式覆盖：

方法1：全局自定义Theme（适合全项目统一样式） #

通过修改react-native-paper的全局主题，一次性覆盖所有SegmentedButtons的样式：

import { Provider as PaperProvider, DefaultTheme } from 'react-native-paper';

// 自定义主题
const customTheme = {
  ...DefaultTheme,
  components: {
    ...DefaultTheme.components,
    SegmentedButtons: {
      ...DefaultTheme.components?.SegmentedButtons,
      // 外层容器样式：移除边框、设为方形
      style: { borderRadius: 0, borderWidth: 0 },
      // 单个按钮样式：确保按钮也是方形
      buttonStyle: { borderRadius: 0 },
    },
  },
};

// 在App根组件外层包裹PaperProvider
function App() {
  return (
    <PaperProvider theme={customTheme}>
      {/* 你的页面/组件 */}
    </PaperProvider>
  );
}

方法2：局部覆盖样式（仅针对单个组件） #

不需要全局修改主题的话，直接给目标SegmentedButtons组件传theme或特定样式props：

import { SegmentedButtons } from 'react-native-paper';

// 方式A：通过theme prop局部覆盖
<SegmentedButtons
  values={['选项1', '选项2', '选项3']}
  selectedValue="选项1"
  onValueChange={(val) => console.log(val)}
  theme={{
    components: {
      SegmentedButtons: {
        style: { borderRadius: 0, borderWidth: 0 },
        buttonStyle: { borderRadius: 0 },
      },
    },
  }}
/>

// 方式B：直接用组件提供的style和buttonStyle props
<SegmentedButtons
  values={['选项1', '选项2']}
  selectedValue="选项1"
  onValueChange={(val) => console.log(val)}
  // 外层容器移除边框、设方形
  style={{ borderRadius: 0, borderWidth: 0 }}
  // 单个按钮设方形
  buttonStyle={{ borderRadius: 0 }}
  // 移除按钮之间的分隔线（如果需要）
  showDivider={false}
/>

关键说明 #

• 直接给组件加普通style只能影响最外层容器，内部按钮的圆角、边框样式需要通过buttonStyle或theme里的对应配置覆盖。
• 如果要完全移除所有边框，记得加上showDivider={false}来取消按钮之间的分隔线。

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