ボタンの色をReact NativeでonPressを使用して変更します

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）コンストラクタで初期状態を設定することができます。次に、（3）後this.setState({ someProp: someValue })を使用して状態を調整this.state.someProp

を使用状態から

（2）アクセス値。新しい状態を設定する状態& 3）へのアクセス

1）初期状態

constructor(props) { 
    super(props); 

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

）コードの一部は、に焦点を当てるために省略された

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

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

注意手元にある質問。