Реактивный родной динамический цвет

Question

Я хочу установить tintColor моего png Image динамика. 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

Я также хотел бы видеть, если есть неправильные значения, транспортируемые в любом случае . Но консоль показала правильный '#ffffff' формат hex_code на myDynamicColor

Я не знаю, дальше и помощь будет очень приятно. Кроме того, я был бы рад, если бы вы показать мне лучшее решение :)

Спасибо 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 
    } 
    ... 
});