Question

我正在使用react native switch组件，我想在关闭时改变开关的颜色。

我可以添加onTintColor属性以在打开时更改颜色。

关闭时有没有办法改变颜色？

Answer 1

只需添加：

style={{backgroundColor: '#FF0000', borderRadius: 17}}

转到开关

Answer 2

React native在其文档中有ColorSwitchExample。您可以引用相同的here。祝你好运！

class ColorSwitchExample extends React.Component {
  state = {
    colorTrueSwitchIsOn: true,
    colorFalseSwitchIsOn: false,
  };

  render() {
    return (
      <View>
        <Switch
          onValueChange={(value) => this.setState({colorFalseSwitchIsOn: value})}
          onTintColor="#00ff00"
          style={{marginBottom: 10}}
          thumbTintColor="#0000ff"
          tintColor="#ff0000"
          value={this.state.colorFalseSwitchIsOn} />
        <Switch
          onValueChange={(value) => this.setState({colorTrueSwitchIsOn: value})}
          onTintColor="#00ff00"
          thumbTintColor="#0000ff"
          tintColor="#ff0000"
          value={this.state.colorTrueSwitchIsOn} />
      </View>
    );
  }
}

Answer 3

onTintColor已被弃用，请尝试以下操作。

<ul class="menu">
    <li class="active"><a href="index.php">Home</a></li>
    <li><a href="bestdeal.php">Best Deal</a></li>
    <li><a href="#">Shop</a>
        <ul>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
        </ul>
    </li>
    <li><a href="#">About Us</a>
        <ul>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
        </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
</ul>

这有效

Answer 4

您可以使用Mihir提供的示例，这应该适用于iOS。如果你想要一些使用Material Design并且适用于Android和iOS的东西（在撰写本文时，React-Native不允许重新加载Android开关），你可以尝试这个包：

https://github.com/recr0ns/react-native-material-switch

祝你好运！

Answer 5

对于来自Google的任何人：专门针对iOS，您需要使用ios_backgroundColor属性：

<Switch ios_backgroundColor="red" trackColor={{ true: 'blue', false: 'red' }} />

参考文献：

https://facebook.github.io/react-native/docs/switch.html#trackcolor

https://facebook.github.io/react-native/docs/switch#ios-backgroundcolor

Answer 6

我设计了特定于平台的开关，还使用了基于On Off状态的边框。

<Switch
trackColor={{ true: '#7ab8e1', false: Platform.OS=='android'?'#d3d3d3':'#fbfbfb'  }}
thumbColor={[Platform.OS=='ios'?'#FFFFFF':(item.status ?'#7ab8e1':'#ffffff')]}
ios_backgroundColor="#fbfbfb"
style={[item.status ?inline_styles.switchEnableBorder:inline_styles.switchDisableBorder]}
value={item.status}
onValueChange={() =>this.change_status(index)            }
/>

内嵌边框样式

const inline_styles = StyleSheet.create({
switchEnableBorder: {
borderColor: '#6fa6d3',
borderWidth: 1},

switchDisableBorder: {
borderColor: '#f2f2f2',
borderWidth: 1,  },});

Android OutPut： iOS输出：

Answer 7

<Switch
trackColor={{true: '#3bde50', false: '#f5f6fc'}}
thumbColor='#FFF'
onValueChange={() => this.toggleSwitch(item, index)}
value={this.state.isActive}
/>

Answer 8

这里是docs中的一个示例，它也可以动态更改拇指的颜色：

<Switch
    trackColor={{ false: "#767577", true: "#81b0ff" }}
    thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
    ios_backgroundColor="#3e3e3e"
    onValueChange={toggleSwitch}
    value={isEnabled}
/>

Answer 9

<Switch
   ios_backgroundColor={Colors.secondaryTextColor}
   thumbColor={[Platform.OS=='ios'?'white': 'white']}
   trackColor={{ true: Colors.primaryColor, false: Colors.secondaryTextColor }}
   style={{ transform: [{ scaleX: .7 }, { scaleY: .7 }] }}
   value={this.state.toggleChatSwitch}
   onValueChange={() => this.onChatSwitchPressed()}
                                            />

在关闭反应原点时改变Switch的颜色

9 个答案: