如何自定义Android端React Native Paper Switch组件匹配Material Design 3

我使用React Native Paper的Switch组件时，期望它完全匹配Material Design 3的样式，但实际显示为旧版本样式。尝试自定义后仍未达到MD3样式效果，需要解决方法。

问题代码 #

import * as React from 'react';
import { Switch } from 'react-native-paper';

const MyComponent = () => {
  const [isSwitchOn, setIsSwitchOn] = React.useState(false);

  const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);

  return <Switch value={isSwitchOn} onValueChange={onToggleSwitch} />;
};

export default MyComponent;

解决步骤 #

1. 升级React Native Paper到支持MD3的版本 #

React Native Paper从v5版本开始支持Material Design 3，确保安装最新版本：

npm install react-native-paper@latest
# 或使用yarn
yarn add react-native-paper@latest

2. 全局配置MD3主题 #

在App根组件中通过PaperProvider启用MD3主题，这是让组件默认使用MD3样式的核心步骤：

import * as React from 'react';
import { Provider as PaperProvider, configureMD3Theme } from 'react-native-paper';
import MyComponent from './MyComponent';

// 配置MD3主题，可自定义颜色、字体等，也直接使用默认配置
const md3Theme = configureMD3Theme({
  colorScheme: 'light', // 可选'dark'切换暗色模式
});

export default function App() {
  return (
    <PaperProvider theme={md3Theme}>
      <MyComponent />
    </PaperProvider>
  );
}

3. 自定义Switch样式（按需调整） #

如果全局主题下的Switch仍未完全匹配MD3视觉效果，可通过props精细调整：

<Switch
  value={isSwitchOn}
  onValueChange={onToggleSwitch}
  // MD3规范：关闭时轨道为浅中性色，开启时为品牌主色
  trackColor={{
    false: '#E5E7EB',
    true: '#16A34A', // 替换为你的品牌主色
  }}
  // MD3拇指始终为白色圆形
  thumbColor={isSwitchOn ? '#FFFFFF' : '#FFFFFF'}
  // 可选：调整开关尺寸匹配MD3规范（MD3开关比旧版稍大）
  style={{
    transform: [{ scaleX: 1.2 }, { scaleY: 1.2 }],
  }}
/>

MD3 Switch核心视觉特点：关闭状态轨道为浅灰色，开启状态为品牌主色，拇指为纯白色圆形，整体圆角更大，视觉更轻盈。

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