React-Native State Dynamische Farbe

Question

Ich möchte die tintColor meines Png Image dynamisch festlegen. Actuall ich versuche, die Farbe an den state Eigenschaften zu setzen und sie mit separaten Funktionen mit der setState zu ändern.

ist mein Code so etwas wie diese (Erwarten Sie, dass alles funktioniert über und um den folgenden Code-Schnipsel in Ordnung):

class dynamicImageColor extends Component{ 
    constructor(props) { 
     super(props); 
     this.state = { 
      myDynamicColor: '#ffffff' 
     } 
    } 

changeColor(bool){ 
    if(bool === true) 
    { 
     this.setState({ 
      myDynamicColor: '#932727' 
     }) 
    }if(bool === false) 
    { 
     this.setState({ 
      myDynamicColor: '#ffffff' 
     }) 
    } 
} 

render(){ 
    return(
     <Image source={myPNGImage} style={styles.PNGImageStyle}/> 
    ) 
} 


var styles = StyleSheet.create({ 
    PNGImageStyle: { 
     tintColor: this.state.myDynamicColor, 
     width: 25, 
     height: 25 
    } 

Alles in dem obigen Code funktioniert prima, wenn ich die tintColor statisch eingestellt. Und die Funktion changeColor (bool) wird an einer anderen Stelle aufgerufen, die nicht relevant ist und gut funktioniert.

Mein eigentliches Problem ist, dass ich die Fehlermeldung:

undefiniert ist kein Objekt (evaluating'this.state.myDynamicColor

wollte ich auch irgendwie falsch Werte transportiert, wenn es sehen . Aber die Konsole zeigte das richtige '#ffffff' hex_code Format am myDynamicColor

ich weiß nicht weiter und Hilfe sehr schön wäre. auch wäre ich froh, wenn Sie mir eine bessere Lösung zeigen :)

Danke BR Jonathan

Answer 1

Es gibt hier ein paar Probleme. Zuerst können Ihre Styles var this nicht verwenden, da es nicht Teil der Klasse ist. Zweitens würde der Wert von tintColor nicht automatisch aktualisiert werden. render() würde immer dieselbe Formatvariable verwenden.

Was Sie tun möchten, ist dies (die eckigen Klammern bemerkt):

render() { 
    return (
    <Image source={myPNGImage} style={[styles.PNGImageStyle, {tintColor: this.state.myDynamicColor}]}/> 
); 
} 

und

var styles = StyleSheet.create({ 
    PNGImageStyle: { 
    width: 25, 
    height: 25 
    } 
    ... 
});