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 
    } 
    ... 
});