Ich benutze reagieren native Switch-Komponente und ich möchte die Farbe des Schalters ändern, wenn ich es ausschalte.Ändern Sie die Farbe des Schalters beim Ausschalten reaktiv-native
Ich kann onTintColor Eigenschaft hinzufügen, um die Farbe zu ändern, wenn es eingeschaltet ist.
Gibt es eine Möglichkeit, die Farbe beim Ausschalten zu ändern?
React native hat ColorSwitchExample in ihren Dokumenten. Sie können das gleiche here beziehen. Viel Glück!
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>
);
}
}
Sie können das Beispiel von Mihir verwenden, und das sollte für iOS funktionieren. Wenn Sie wollen etwas, das Material Design verwendet und funktioniert sowohl unter Android und iOS (als dies geschrieben wurde, Reaktion Native nicht Umfärbung von Android-Switches erlaubt), können Sie dieses Paket versuchen:
https://github.com/recr0ns/react-native-material-switch
Gut Glück!
Fügen Sie einfach:
style={{backgroundColor: '#FF0000', borderRadius: 17}}
an den Schalter
@Ankush Rishi Das glaube ich nicht, dass Sie das Aussehen des Schalters ändern können, wenn er ausgeschaltet ist, aber Sie den Streifen Farbe mit tintColor und Änderung ändern Kreisfarbe mit thumbTintColor. –
@RajeevUpadhyay Haben Sie das Beispiel auf ihrer Seite ausgeführt? Ich kann sehen, wie der Schalter nach dem Ausschalten seine Farbe ändert! Oder fehlt mir etwas? – Mihir
@Mihir Ich möchte die Hintergrundfarbe ändern, thumbTintColor ändert nur die Farbe des Schiebereglers und tintColor ändert die Rahmenfarbe. Genau wie bei TintColor ist das, was ich möchte, wenn der Schalter im Aus-Modus ist –