React Native - 状态不会改变

Question

I'm working on my first small game app.

What I want to do is passing boolean GreenF to the Green component. (this component is a green button that checks if greenFlash is true, then changes the color of the button - works ok).

But the greenF state won't change from false to true, then the Green component is not changed. I need GreenF to change whenever I need in the function play();

Right now greenF is undefined whenever I'm passing it to . I'm not sure if I'm missing something or having a problem understanding React state.

This is just the beginning of my code so nothing is full, but just for your understanding.

import React, {Component} from 'react';
import {StyleSheet, Text, View,TouchableOpacity, Button} from 'react-native';
import Green from './components/Green.js'

export default class App extends Component{
  constructor (props){
    super(props);
    this.state = {
      greenF: false
    }
  }

  render() {
    let score; // user score
    let seq=[];//order of playing colors
    let playerSeq=[]; //order of user pressing the colors
    let round; // round number
    let ok; //does the user pressed right
    let win;
    let compTurn;
    let greenF;    
    /* 
    for (var i=0; i<5; i++) {
      seq.push(Math.floor(Math.random()*4)+1);
    }
    */

    function play() {
      seq=[1,2,3,1,4]; //just for test
      compTurn=true;
      round=1;
      for (var i=0; i<round ; i++){
        switch (i) {
          case 1:
            this.setState({ greenF: true })
            break;
          case 2:
            //tbchanged
            break;
          case 3:
            //tbchanged
            break;
          case 4:
            //tbchanged
            break;
        }
        compTurn=false;
      }
    }

    return (
      <View>
        <Button 
        title='start' 
        color='black' 
        onPress={() => {
          play();
         }}>

        </Button>
        <Green greenFlash={greenF}> </Green>  //GREENF IS UNDEFINED
      </View>
    );
  }
}

Answer 1

You must take it from the state otherwise it is truly undefined:

<Green greenFlash={this.state.greenF} />

From React docs:

In addition to taking input data (accessed via this.props), a component can maintain internal state data (accessed via this.state). When a component's state data changes, the rendered markup will be updated by re-invoking render().

That being said the play() method and the static variables you are trying to change are actually wrongly used/defined. All you have to do is to always use the state to trigger a re-rendering of the component:

export default class App extends Component{
  constructor (props){
    super(props);
    this.state = {
      greenF: false,
      score: 0,
      seq: [1,2,3,1,4],
      playerSeq: [],
      round: 1,
    }
  }

  play()
  {
     // I don't know exactly what you want to achieve here, but the idea
     // was to move the play method outside the render method

      seq=[1,2,3,1,4]; //just for test
      compTurn=true;
      round=1;
      for (var i=0; i<round ; i++){
        switch (i) {
          case 1:
            this.setState({ greenF: true })
            break;
          case 2:
            //tbchanged
            break;
          case 3:
            //tbchanged
            break;
          case 4:
            //tbchanged
            break;
        }
        compTurn=false;
      }
    }


  render()
 {
    return (
      <View>
        <Button 
        title='start' 
        color='black' 
        onPress={this.play}>

        </Button>
        <Green greenFlash={this.state.greenF}> </Green>
      </View>
    );
  }
}