如何在 React Native 中更改 Switch 拇指的颜色答案

【问题标题】：How to change the colour of the Switch thumb in React Native如何在 React Native 中更改 Switch 拇指的颜色
【发布时间】：2022-08-11 05:55:00
【问题描述】：

我在我的应用程序中有这个Switch，在 iPhone 上它显示正确，无论开关是打开还是关闭，都有一个白色的拇指。但是，在网络上，当开关打开时，它是这种蓝色，在我的应用程序中没有定义。我无法弄清楚如何覆盖它。

<Switch
       trackColor={{ false: colours.darkGrey, true: colours.primary }}
       ios_backgroundColor={colours.darkGrey}
       thumbColor={colours.white}
       onValueChange={toggleSwitch}
       value={notificationEnabled}
       style={styles.switch}
/>

开关switch 风格：

switch: {
    transform: [{ scaleX: 0.7 }, { scaleY: 0.7 }],
  },

我不太担心形状不一样，但颜色应该匹配。

试试thumbColor=\"white\"，看起来你的colours.white 不是白色的......如果不工作，那么你使用超级旧的 React Native 版本，因为这是 rn 50 版本的问题，它在 RN 0.67 上的工作测试工作完美，也在 44 世博会测试...

标签： reactjs react-native user-interface uiswitch toggleswitch

【解决方案1】：

事实证明，当通过 React Native Web 使用时，Switch 组件具有不同的属性，这些属性未在类型中定义。

要解决您的特定问题，您还需要提供道具activeThumbColor={colours.white}

欲了解更多信息，请参阅：https://necolas.github.io/react-native-web/docs/switch/

【讨论】：