如何在React Native中实现指定设计样式的Switcher开关组件？

完全可以实现，推荐两种方案，按需选择即可：

• 方案1：基于官方Switch组件改造
  React Native自带的Switch组件已经支持自定义轨道、滑块颜色等核心样式，适配大部分设计需求，示例代码如下：

  import { useState } from 'react';
  import { Switch } from 'react-native';
  
  const CustomSwitch = () => {
    const [isEnabled, setIsEnabled] = useState(false);
    return (
      <Switch
        trackColor={{ false: '#E5E7EB', true: '#16A34A' }} // 替换为设计稿对应色值
        thumbColor="#FFFFFF"
        ios_backgroundColor="#E5E7EB"
        onValueChange={(value) => setIsEnabled(value)}
        value={isEnabled}
      />
    );
  };
  

  如果你的设计只需要改颜色、不需要调整开关大小、圆角、阴影等细节，用这个方案即可，性能最优。

• 方案2：手写自定义Switch组件，100%还原设计
  如果官方组件的样式定制能力满足不了需求（比如要改轨道高度、滑块大小、加阴影、特殊动效），可以用Pressable+Animated手写，所有参数都可以和设计稿完全对齐，示例代码如下：

  import { useState } from 'react';
  import { View, Pressable, Animated, StyleSheet } from 'react-native';
  
  const CustomSwitch = () => {
    const [isOn, setIsOn] = useState(false);
    const slideAnim = useState(new Animated.Value(0))[0];
  
    const toggle = () => {
      Animated.timing(slideAnim, {
        toValue: isOn ? 0 : 22, // 位移距离=轨道宽度-滑块宽度-左右内边距，按需调整
        duration: 200,
        useNativeDriver: true
      }).start();
      setIsOn(!isOn);
    };
  
    return (
      <Pressable onPress={toggle} style={styles.switchWrapper}>
        <View style={[styles.track, { backgroundColor: isOn ? '#16A34A' : '#E5E7EB' }]} />
        <Animated.View style={[styles.thumb, { transform: [{ translateX: slideAnim }] }]} />
      </Pressable>
    );
  };
  
  const styles = StyleSheet.create({
    switchWrapper: {
      width: 50,
      height: 28,
      justifyContent: 'center',
    },
    track: {
      width: '100%',
      height: '100%',
      borderRadius: 14,
      position: 'absolute',
    },
    thumb: {
      width: 24,
      height: 24,
      borderRadius: 12,
      backgroundColor: '#FFFFFF',
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.15,
      shadowRadius: 2,
      elevation: 2,
    }
  });
  

  直接对照设计图调整上述代码中的宽高、圆角、色值、位移距离、动画时长等参数，即可实现和图示完全一致的效果。

内容的提问来源于stack exchange，提问作者Tomás Aguiar