React-Native狀態動態顏色

Question

我想設置我的png Image動態的tintColor。 Actuall我試圖在state屬性上設置顏色，並用setState用單獨的函數更改它們。

我的代碼是這樣的（預計上述一切圍繞以下代碼段工作正常）：在代碼

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 
    } 

上述一切工作正常，如果我設置tintColor靜態的。而函數changeColor（bool）在一些不相關的地方調用，並且工作正常。

我實際的問題是，我得到的錯誤信息：

不確定是不是一個對象（evaluating'this.state.myDynamicColor

我也想看看是否有無論如何運錯誤的價值觀但是控制檯顯示在myDynamicColor

我不知道再和幫助將是非常好的正確的'#ffffff' hex_code格式。另外，如果你給我一個更好的解決辦法:)

我會很高興

謝謝 BR 喬納森

Answer 1

這裏有幾個問題。首先，你的樣式var不能使用this，因爲它不是類的一部分。其次，tintColor的值不會自動更新。 render（）將始終使用相同的樣式變量。

你想要做的是什麼（注意括號）：

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

和

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