图像 – React-Native State动态颜色

发布时间：2020-12-15 05:06:31 所属栏目：百科来源：网络整理

导读：我想设置我的png Image动态的tintColor. Actuall我试图在状态属性中设置颜色,并使用setState使用单独的函数更改它们. 我的代码是这样的(期望在以下代码片段的上方和周围一切正常)： class dynamicImageColor extends Component{ constructor(props) { super(

我想设置我的png Image动态的tintColor. Actuall我试图在状态属性中设置颜色,并使用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)在其他一些不相关的地方被调用并且工作正常.

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

undefined不是对象(evaluate’this.state.myDynamicColor

我还想看看是否有错误的值传输.但是控制台在myDynamicColor上显示了正确的’#ffffff’hex_code格式

我不知道进一步,帮助会非常好.如果你给我一个更好的解决方案,我也很高兴:)

谢谢
BR
乔纳森

这里有一些问题.首先你的styles var不能使用它,因为它不是类的一部分.其次,tintColor的值不会自动更新. render()总是使用相同的样式变量.

你想要做的是这(注意方括号)：

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

和

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!