React Native Switch组件Thumb按下时默认边框颜色替换为橙色方案

你遇到的是React Native原生Switch组件在安卓平台的默认焦点边框问题——点击滑块时出现的默认边框无法通过trackColor或thumbColor直接修改，需要针对性处理，下面是两种可行方案：

方案1：基于原生Switch修改（保留原有组件结构） #

通过平台专属样式隐藏默认边框，还能模拟自定义橙色点击边框：

import React, { FunctionComponent, useState } from 'react';
import { Switch, View, Platform, StyleSheet, TouchableWithoutFeedback } from 'react-native';
import { useTheme } from 'react-native-paper';

interface IMSwitchProps {
  toggleValue: boolean;
  onToggleChange: (value?: any) => void;
  disableSwitch?: boolean;
  testId?: string;
}

const IMSwitch: FunctionComponent<IMSwitchProps> = (props: IMSwitchProps) => {
  const theme = useTheme();
  const [isPressed, setIsPressed] = useState(false);

  // 禁用状态直接渲染
  if (props.disableSwitch) {
    return (
      <View style={styles.switchContainer}>
        <Switch
          value={props.toggleValue}
          onValueChange={() => {}}
          trackColor={{ false: theme.Palette.grey[100], true: theme.Palette.grey[100] }}
          thumbColor={theme.Palette.background}
          disabled={true}
          testID={props.testId}
          style={styles.switch}
        />
      </View>
    );
  }

  return (
    <TouchableWithoutFeedback
      onPressIn={() => setIsPressed(true)}
      onPressOut={() => setIsPressed(false)}
      onPress={() => props.onToggleChange(!props.toggleValue)}
    >
      <View 
        style={[
          styles.switchContainer,
          isPressed && { borderColor: theme.Palette.IMPrimary.main, borderWidth: 2 }
        ]}
      >
        <Switch
          value={props.toggleValue}
          onValueChange={(value) => props.onToggleChange(value)}
          trackColor={{
            false: theme.Palette.grey[500],
            true: theme.Palette.IMPrimary.border,
          }}
          thumbColor={props.toggleValue ? theme.Palette.IMPrimary.main : theme.Palette.background}
          disabled={false}
          testID={props.testId}
          style={[
            styles.switch,
            Platform.select({
              android: {
                // 隐藏安卓默认焦点边框
                outlineColor: 'transparent',
                elevation: 0,
              },
            }),
          ]}
        />
      </View>
    </TouchableWithoutFeedback>
  );
};

const styles = StyleSheet.create({
  switchContainer: {
    borderRadius: 20, // 和Switch圆角匹配
    padding: 2,
    borderWidth: 0,
  },
  switch: {
    transform: [{ scaleX: 1 }, { scaleY: 1 }], // 可选：调整组件大小适配容器
  },
});

export default IMSwitch;

方案2：改用react-native-paper的Switch组件（更简洁） #

既然你已经引入了react-native-paper，直接使用它封装的Switch组件，支持自定义点击波纹/边框样式：

import React, { FunctionComponent } from 'react';
import { Switch } from 'react-native-paper'; // 替换为paper组件
import { useTheme } from 'react-native-paper';

interface IMSwitchProps {
  toggleValue: boolean;
  onToggleChange: (value?: any) => void;
  disableSwitch?: boolean;
  testId?: string;
}

const IMSwitch: FunctionComponent<IMSwitchProps> = (props: IMSwitchProps) => {
  const theme = useTheme();

  return (
    <Switch
      value={props.toggleValue}
      onValueChange={(value) => props.onToggleChange(value)}
      color={theme.Palette.IMPrimary.main}
      disabledColor={theme.Palette.grey[100]}
      trackColor={{
        false: props.disableSwitch ? theme.Palette.grey[100] : theme.Palette.grey[500],
        true: props.disableSwitch ? theme.Palette.grey[100] : theme.Palette.IMPrimary.border,
      }}
      thumbColor={
        props.disableSwitch
          ? theme.Palette.background
          : props.toggleValue
          ? theme.Palette.IMPrimary.main
          : theme.Palette.background
      }
      disabled={props.disableSwitch}
      testID={props.testId}
      rippleColor={`${theme.Palette.IMPrimary.main}33`} // 半透明橙色波纹（安卓点击效果）
    />
  );
};

export default IMSwitch;

方案2无需额外处理原生组件的限制，更适合已经使用react-native-paper的项目。

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