Изменить цвет кнопки, используя onPress on React Native

Question

Я бы хотел, чтобы кнопка меняла свой цвет при нажатии. Я попытался проверить другие подобные темы, но я не смог найти решение. Код отображается, а исходный цвет кнопки - красный, но когда я его нажимаю, ничего не происходит.

export default class someProgram extends Component { 
    render() { 

    var buttonColor = "red"; 

    function changeButtonColor(){ 
    if(this.buttonColor === "red"){ 
     this.buttonColor = "green"; 
    } 
    else{ 
     this.buttonColor = "red"; 
    } 
    } 

    return (
    <View style={styles.container}>  
     <Button 
     title="Press me!" 
     color={buttonColor} 
     onPress={() => {changeButtonColor(buttonColor)}} 
     /> 
    </View> 
); 
} 
} 

Answer 1

Вы должны отслеживать цвет в состоянии компонента. В качестве стороны обязательно ознакомьтесь с тем, что действительно означает ключевое слово . Сделайте console.log(this) и посмотрите сами.

Во всяком случае, вы можете

(1) установить начальное состояние в конструкторе;

(2) значение доступа из состояния с использованием this.state.someProp

затем (3) отрегулировать положение позже с помощью this.setState({ someProp: someValue }).

1) Исходное состояние

constructor(props) { 
    super(props); 

    this.state = { 
    buttonColor: 'red'; // default button color goes here 
    }; 
} 

2) Доступ к государству & 3) Установка нового состояния

onButtonPress =() => { 
    this.setState({ buttonColor: 'someNewColor' }); 
} 

render() { 
    // ... 
    return (
    {/* ... */} 
    <Button 
     color={this.state.buttonColor} 
     onPress={onButtonPress} 
    /> 
) 

Примечание некоторые части кода были опущены, чтобы сосредоточить внимание на вопрос под рукой.