React-Native State动态颜色 [英] React-Native State Dynamic Color

问题描述

我想设置我的png 图像动态的 tintColor 。 Actuall我试图将颜色设置为状态属性，并使用 setState 分开的功能进行更改。

我的代码是这样的（预期上面和周围的代码片段都可以正常工作）：

  class dynamicImageColor extends Component {
 constructor（props）{
 super（props）; 
 this.state = {
 myDynamicColor：'#ffffff'
} 
} 
 
 changeColor（bool）{
 if（bool = 
 {
 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）被调用一些其他地方不相关，工作正常。

我的实际问题是我得到错误或消息：

undefined不是一个对象（evaluate'this.state.myDynamicColor

我也想看看是否有错误的价值观运输。但是控制台在 myDynamicColor

$中显示正确的'＃ffffff' hex_code格式b $ b

我不知道进一步，帮助将是非常好的。另外我会很高兴，如果你给我一个更好的解决方案：）

谢谢
BR
Jonathan

解决方案

这里有一些问题。首先你的样式var不能使用这个，因为它不是类的一部分。第二，tintColor的值不会被自动更新。 render（）将总是使用相同的样式变量。

你想做的是这样（注意方括号）：

  render（）{
 return（
< Image source = {myPNGImage} style = {[styles.PNGImageStyle，{tintColor：this.state .myDynamicColor}]} /> 
）; 
} 
  

和

  var styles = StyleSheet.create（{
 PNGImageStyle：{
 width：25，
 height：25 
} 
 .. 。
}）; 
  

I want to set the tintColor of my png Image dynamic. Actuall i am trying to set the color at the state properties and change them with seperate functions with the setState.

My code is something like this (Expect that everything works fine above and around the following code snippet):

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
    }

Everything in the code above is working fine if i set the tintColor static. And the function changeColor(bool) is called in some other place which is not relevant and works fine.

My actual problem is that i get the error message:

undefined is not an object(evaluating'this.state.myDynamicColor

I also wanted to see if there are wrong values transported anyhow. But the console showed the right '#ffffff' hex_code format at the myDynamicColor

I dont know further and help would be very nice. Also i would be glad if you show me a better solution :)

Thank you BR Jonathan

解决方案

There are a few issues here. First your styles var can't use this because it's not part of the class. Second the value of tintColor would not be automatically updated. render() would always use the same styles variable.

What you want to do is this (notice the square brackets):

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

and

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

这篇关于React-Native State动态颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！